Let the composer grow with long prompts and focus from anywhere on its row

The input row had a fixed 88px height, so a growing textarea overflowed into the thread and tools strip. It now has a minimum height, grows to eight lines then scrolls, keeps the buttons at the bottom, and falls back to a JS auto-grow where field-sizing isn't supported. A click anywhere on the row focuses the input. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-19 20:42:13 +01:00
parent bf7109952b
commit 727cbf53c8
3 changed files with 48 additions and 9 deletions
@@ -0,0 +1,22 @@
+import { useLayoutEffect, type RefObject } from "react";
+
+type Params = {
+    ref: RefObject<HTMLTextAreaElement | null>;
+    value: string;
+};
+
+/**
+ * Grows a textarea with its text where `field-sizing: content` isn't
+ * supported (Firefox). Its CSS `max-height` still caps it, then it scrolls.
+ * Does nothing where the CSS handles it.
+ */
+export default function useAutoGrowTextarea({ ref, value }: Params) {
+    useLayoutEffect(() => {
+        const el = ref.current;
+
+        if (!el || CSS.supports("field-sizing", "content")) return;
+
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+    }, [ref, value]);
+}