From e7ff2bcbb418dcbbf282f0ac55284dd30e4f6091 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 25 Sep 2025 13:24:01 -0400
Subject: [PATCH] Improve height reset logic for proper shrinking after text
 deletion

- Reset height constraints on both textarea and display layers
- Force reflow on both elements to ensure accurate measurement
- Reset display content constraints to prevent stale minHeight values
- Enhanced logging to track height synchronization behavior
---
 ui/desktop/src/components/RichChatInput.tsx | 25 ++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/components/RichChatInput.tsx b/ui/desktop/src/components/RichChatInput.tsx
index 30b7fb77be..70a20e84aa 100644
--- a/ui/desktop/src/components/RichChatInput.tsx
+++ b/ui/desktop/src/components/RichChatInput.tsx
@@ -151,8 +151,21 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
       textarea.style.minHeight = 'auto';
       textarea.style.maxHeight = 'none';
       
+      // Also reset display constraints
+      display.style.height = 'auto';
+      display.style.minHeight = 'auto';
+      display.style.maxHeight = 'none';
+      
+      // Reset display content constraints too
+      const displayContent = display.firstElementChild as HTMLElement;
+      if (displayContent) {
+        displayContent.style.minHeight = 'auto';
+        displayContent.style.height = 'auto';
+      }
+      
       // Force a reflow to ensure the browser recalculates dimensions
       textarea.offsetHeight;
+      display.offsetHeight;
       
       const textareaScrollHeight = textarea.scrollHeight;
       
@@ -178,10 +191,13 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
       
       // Force the display layer to have the same scrollable content area
       // This ensures that when the textarea scrolls, the display can show the same content
-      const displayContent = display.firstElementChild as HTMLElement;
       if (displayContent) {
-        // Make sure the content area matches the textarea's scroll height
-        displayContent.style.minHeight = `${textareaScrollHeight}px`;
+        // Only set minHeight if content is taller than the container, otherwise let it be natural
+        if (textareaScrollHeight > finalHeight) {
+          displayContent.style.minHeight = `${textareaScrollHeight}px`;
+        } else {
+          displayContent.style.minHeight = 'auto';
+        }
       }
       
       // Sync scroll positions
@@ -189,10 +205,13 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
       display.scrollLeft = textarea.scrollLeft;
       
       console.log('🔄 SYNC HEIGHT:', {
+        value: textarea.value,
+        valueLength: textarea.value.length,
         textareaScrollHeight,
         desiredHeight,
         finalHeight,
         maxHeight,
+        minHeight,
         scrollTop: textarea.scrollTop,
         textareaHeight: textarea.style.height,
         displayHeight: display.style.height,