🤖 fix: chat input initial size bug (#850)

The chat input could appear way too big vertically on initial app
launch, then collapse to correct size when text was entered or window
was resized.

**Root cause:** `useEffect` runs asynchronously after paint, so the
initial `scrollHeight` measurement could happen before layout settled,
resulting in an incorrect (too large) height.

**Fix:** Switch to `useLayoutEffect` which runs synchronously after DOM
mutations but before the browser paints, ensuring accurate initial
height measurement.

---
_Generated with `mux`_

Author: ammar-agent

src/browser/components/VimTextArea.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { UIMode } from "@/common/types/mode";
 import * as vim from "@/browser/utils/vim";
 import { TooltipWrapper, Tooltip, HelpIndicator } from "./Tooltip";
@@ -64,11 +64,15 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
     const yankBufferRef = useRef<string>("");
 
     // Auto-resize when value changes
-    useEffect(() => {
+    // Uses useLayoutEffect to measure and set height synchronously before paint,
+    // preventing flash of wrong size on initial render
+    useLayoutEffect(() => {
       const el = textareaRef.current;
       if (!el) return;
+      // Reset to auto to get accurate scrollHeight measurement
       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]);