From cd8b860a26be45ac42cc78e53d6ec4f46d95fe53 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 25 Sep 2025 11:55:02 -0400
Subject: [PATCH] Fix scrolling issues and prevent message section interference

- Add scroll loop prevention in handleTextareaScroll with 1px threshold
- Change visual display from overflow-y-auto to overflow-hidden
- Ensure only textarea controls scrolling behavior
- Prevent visual layer from interfering with parent scroll events
- Maintain auto-scroll functionality while fixing sync issues
---
 ui/desktop/src/components/RichChatInput.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/desktop/src/components/RichChatInput.tsx b/ui/desktop/src/components/RichChatInput.tsx
index 2c49c5de5a..d22e87e76c 100644
--- a/ui/desktop/src/components/RichChatInput.tsx
+++ b/ui/desktop/src/components/RichChatInput.tsx
@@ -126,11 +126,19 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
   const [cursorPosition, setCursorPosition] = useState(0);
   const [misspelledWords, setMisspelledWords] = useState<{ word: string; start: number; end: number; suggestions: string[] }[]>([]);
   
-  // Scroll synchronization
+  // Scroll synchronization - only sync from textarea to display, not the reverse
   const handleTextareaScroll = useCallback(() => {
     if (hiddenTextareaRef.current && displayRef.current) {
-      displayRef.current.scrollTop = hiddenTextareaRef.current.scrollTop;
-      displayRef.current.scrollLeft = hiddenTextareaRef.current.scrollLeft;
+      // Prevent infinite scroll loops by checking if sync is needed
+      const textarea = hiddenTextareaRef.current;
+      const display = displayRef.current;
+      
+      if (Math.abs(display.scrollTop - textarea.scrollTop) > 1) {
+        display.scrollTop = textarea.scrollTop;
+      }
+      if (Math.abs(display.scrollLeft - textarea.scrollLeft) > 1) {
+        display.scrollLeft = textarea.scrollLeft;
+      }
     }
   }, []);
 
@@ -896,7 +904,7 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
       {/* Visual display with action pills, mention pills, spell check, and cursor */}
       <div
         ref={displayRef}
-        className={`${className} cursor-text relative overflow-y-auto`}
+        className={`${className} cursor-text relative overflow-hidden`}
         style={{
           ...style,
           minHeight: `${rows * 1.5}em`,
@@ -912,7 +920,6 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
           margin: '0',
           whiteSpace: 'pre-wrap', // Match textarea
           wordWrap: 'break-word',
-          scrollBehavior: 'smooth', // Smooth scrolling
         }}
         role="textbox"
         aria-multiline="true"