From dff3fbb0b5832554dc28ee9502adc8b3d6bc565f Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 25 Sep 2025 11:47:59 -0400
Subject: [PATCH] Add scroll functionality for large paragraphs

- Add overflow-y-auto to both textarea and visual display layers
- Implement scroll synchronization between layers
- Maintain spell checking functionality during scrolling
- Enable writing and editing of long text content
- Preserve all interactive features (selection, spell check, tooltips)
---
 ui/desktop/src/components/RichChatInput.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/RichChatInput.tsx b/ui/desktop/src/components/RichChatInput.tsx
index b29da8d1fb..dafc0922f4 100644
--- a/ui/desktop/src/components/RichChatInput.tsx
+++ b/ui/desktop/src/components/RichChatInput.tsx
@@ -126,6 +126,14 @@ 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
+  const handleTextareaScroll = useCallback(() => {
+    if (hiddenTextareaRef.current && displayRef.current) {
+      displayRef.current.scrollTop = hiddenTextareaRef.current.scrollTop;
+      displayRef.current.scrollLeft = hiddenTextareaRef.current.scrollLeft;
+    }
+  }, []);
+  
   // Spell check tooltip state
   const [tooltip, setTooltip] = useState<{
     isVisible: boolean;
@@ -731,7 +739,8 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
         disabled={disabled}
         data-testid={testId}
         spellCheck={false} // Disable browser spell check - we handle it ourselves
-        className="absolute inset-0 w-full h-full resize-none selection:bg-blue-500 selection:text-white"
+        className="absolute inset-0 w-full h-full resize-none selection:bg-blue-500 selection:text-white overflow-y-auto"
+        onScroll={handleTextareaScroll}
         onMouseMove={(e) => {
           // Improved hover detection with better coordinate mapping
           const textarea = e.currentTarget;
@@ -844,7 +853,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`}
+        className={`${className} cursor-text relative overflow-y-auto`}
         style={{
           ...style,
           minHeight: `${rows * 1.5}em`,