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>
This commit is contained in:
Dotta
2026-03-03 12:26:28 -06:00
parent eafacd4d55
commit 01210cef49

View File

@@ -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)}