From 77d16f87ceb5f06597bb08199fca0848ff968a40 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 22 Mar 2026 23:47:30 -0700
Subject: [PATCH] Make comment textarea auto-expandable in WorktreeMetaDialog

Auto-resize the textarea as the user types, capped at max-h-60 with overflow scroll.

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

diff --git a/src/renderer/src/components/sidebar/WorktreeMetaDialog.tsx b/src/renderer/src/components/sidebar/WorktreeMetaDialog.tsx
index f6ff5380540..ef6036dac0e 100644
--- a/src/renderer/src/components/sidebar/WorktreeMetaDialog.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeMetaDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useAppStore } from '@/store'
 import {
   Dialog,
@@ -32,6 +32,7 @@ const WorktreeMetaDialog = React.memo(function WorktreeMetaDialog() {
   const [commentInput, setCommentInput] = useState('')
   const [saving, setSaving] = useState(false)
 
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
   const prevIsOpenRef = useRef(false)
   if (isOpen && !prevIsOpenRef.current) {
     setIssueInput(currentIssue)
@@ -39,6 +40,17 @@ const WorktreeMetaDialog = React.memo(function WorktreeMetaDialog() {
   }
   prevIsOpenRef.current = isOpen
 
+  const autoResize = useCallback(() => {
+    const ta = textareaRef.current
+    if (!ta) return
+    ta.style.height = 'auto'
+    ta.style.height = `${ta.scrollHeight}px`
+  }, [])
+
+  useEffect(() => {
+    if (isEditComment) autoResize()
+  }, [isEditComment, commentInput, autoResize])
+
   const canSave = useMemo(() => {
     if (!worktreeId) return false
     if (isLinkIssue)
@@ -112,12 +124,13 @@ const WorktreeMetaDialog = React.memo(function WorktreeMetaDialog() {
           <div className="space-y-1">
             <label className="text-[11px] font-medium text-muted-foreground">Comment</label>
             <textarea
+              ref={textareaRef}
               value={commentInput}
               onChange={(e) => setCommentInput(e.target.value)}
               placeholder="Notes about this worktree..."
               rows={3}
               autoFocus
-              className="w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 resize-none"
+              className="w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 resize-none max-h-60 overflow-y-auto"
             />
           </div>
         )}