🤖 fix: eliminate chat textarea race condition on initial render (#958)

The chat input textarea could appear too large on initial app launch,
then collapse to correct size when text was entered.

**Root cause:** The previous fix used `useLayoutEffect` but still relied
on measuring `scrollHeight` after setting `height: auto`. For an empty
textarea, this measurement could return incorrect values before the flex
container layout had settled.

**Fix:** Skip `scrollHeight` measurement entirely when the textarea is
empty or whitespace-only. Instead, clear the inline height style and let
the CSS `min-h-8` (32px) handle sizing. This is deterministic and avoids
the race condition.

Also unified height management: ChatInput no longer hardcodes `36px`
when clearing input - it clears the inline style to let VimTextArea's
CSS take over, ensuring consistent behavior.

---
_Generated with `mux`_

Author: ammar-agent

src/browser/components/ChatInput/index.tsx

@@ -641,8 +641,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       if (ok) {
         setInput("");
         setImageAttachments([]);
+        // Height is managed by VimTextArea's useLayoutEffect - clear inline style
+        // to let CSS min-height take over
         if (inputRef.current) {
-          inputRef.current.style.height = "36px";
+          inputRef.current.style.height = "";
         }
       }
       setIsSending(false);
@@ -661,7 +663,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         if (parsed.type === "clear") {
           setInput("");
           if (inputRef.current) {
-            inputRef.current.style.height = "36px";
+            inputRef.current.style.height = "";
           }
           await props.onTruncateHistory(1.0);
           setToast({
@@ -676,7 +678,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         if (parsed.type === "truncate") {
           setInput("");
           if (inputRef.current) {
-            inputRef.current.style.height = "36px";
+            inputRef.current.style.height = "";
           }
           await props.onTruncateHistory(parsed.percentage);
           setToast({
@@ -994,9 +996,9 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         // These will be restored if the send operation fails
         setInput("");
         setImageAttachments([]);
-        // Reset textarea height
+        // Clear inline height style - VimTextArea's useLayoutEffect will handle sizing
         if (inputRef.current) {
-          inputRef.current.style.height = "36px";
+          inputRef.current.style.height = "";
         }
 
         const result = await api.workspace.sendMessage({

src/browser/components/VimTextArea.tsx

@@ -81,15 +81,25 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
     const yankBufferRef = useRef<string>("");
 
     // Auto-resize when value changes
-    // Uses useLayoutEffect to measure and set height synchronously before paint,
-    // preventing flash of wrong size on initial render
+    // Uses useLayoutEffect to measure and set height synchronously before paint.
+    // Key insight: when value is empty or whitespace-only, skip measurement entirely
+    // and use the CSS min-height. This avoids race conditions where scrollHeight
+    // returns incorrect values before flexbox layout settles.
     useLayoutEffect(() => {
       const el = textareaRef.current;
       if (!el) return;
-      // Reset to auto to get accurate scrollHeight measurement
+
+      // For empty/whitespace content, let CSS min-height handle sizing.
+      // This is deterministic and avoids measuring scrollHeight when the
+      // flex container may not have settled.
+      if (!value.trim()) {
+        el.style.height = "";
+        return;
+      }
+
+      // For non-empty content, measure and set height
       el.style.height = "auto";
       const max = window.innerHeight * 0.5; // 50vh
-      // scrollHeight gives the full content height; clamp to max
       el.style.height = Math.min(el.scrollHeight, max) + "px";
     }, [value]);