From 01210cef493aaa398b0311e2dde650f37867ba70 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 3 Mar 2026 12:26:28 -0600
Subject: [PATCH] fix: onboarding step 3 description textarea scrolling and
 auto-grow

The description textarea in onboarding step 3 couldn't scroll and was too
short for the default content. Added auto-grow behavior that resizes from
120px up to 300px based on content, with overflow scrolling beyond the cap.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/OnboardingWizard.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/OnboardingWizard.tsx b/ui/src/components/OnboardingWizard.tsx
index 45b07762..fbf7c524 100644
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
@@ -78,6 +78,15 @@ export function OnboardingWizard() {
   const [taskTitle, setTaskTitle] = useState("Create your CEO HEARTBEAT.md");
   const [taskDescription, setTaskDescription] = useState(DEFAULT_TASK_DESCRIPTION);
 
+  // Auto-grow textarea for task description
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const autoResizeTextarea = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+  }, []);
+
   // Created entity IDs — pre-populate from existing company when skipping step 1
   const [createdCompanyId, setCreatedCompanyId] = useState<string | null>(existingCompanyId ?? null);
   const [createdCompanyPrefix, setCreatedCompanyPrefix] = useState<string | null>(null);
@@ -102,6 +111,11 @@ export function OnboardingWizard() {
     if (company) setCreatedCompanyPrefix(company.issuePrefix);
   }, [onboardingOpen, createdCompanyId, createdCompanyPrefix, companies]);
 
+  // Resize textarea when step 3 is shown or description changes
+  useEffect(() => {
+    if (step === 3) autoResizeTextarea();
+  }, [step, taskDescription, autoResizeTextarea]);
+
   const { data: adapterModels } = useQuery({
     queryKey: ["adapter-models", adapterType],
     queryFn: () => agentsApi.adapterModels(adapterType),
@@ -592,7 +606,8 @@ export function OnboardingWizard() {
                       Description (optional)
                     </label>
                     <textarea
-                      className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50 resize-none min-h-[80px]"
+                      ref={textareaRef}
+                      className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50 resize-none min-h-[120px] max-h-[300px] overflow-y-auto"
                       placeholder="Add more detail about what the agent should do..."
                       value={taskDescription}
                       onChange={(e) => setTaskDescription(e.target.value)}