From badf088a957b79d09668d7eb4009ecb78b0bf235 Mon Sep 17 00:00:00 2001 From: Ammar Date: Tue, 2 Dec 2025 11:47:18 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20use=20useLayoutEffect=20f?= =?UTF-8?q?or=20chat=20input=20auto-resize?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 that persisted until next value change. Fix: Switch to useLayoutEffect which runs synchronously after DOM mutations but before the browser paints, ensuring accurate initial height measurement. --- src/browser/components/VimTextArea.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/browser/components/VimTextArea.tsx b/src/browser/components/VimTextArea.tsx index 9e44d868d0..1abcfa0c5a 100644 --- a/src/browser/components/VimTextArea.tsx +++ b/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(""); // 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]);