From 502add4bd1e42128d6c502897bcebafbc91d169d Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Thu, 23 Apr 2026 17:37:36 +0800
Subject: [PATCH] fix(issues): restore compact single-line reply editor, keep
 expand overlap fix (#1562)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#1558 fixed the expand button covering trailing text, but also collapsed
the reply editor's "empty = 1 line, has content = 2 lines" behavior by
making the button row a permanent flex sibling below the editor.

Restore the original absolute-positioned button row on both editors:

- comment-input: back to `pb-8` container + `absolute bottom-1 right-1.5`
  buttons (pre-#1558 layout; never had the overlap bug).
- reply-input: absolute buttons + `pb-7` gated on `!isEmpty || isExpanded`.
  Empty → single-line compact; any content → two-row layout with buttons
  below text (no overlap by construction).

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/views/issues/components/comment-input.tsx | 8 ++++----
 packages/views/issues/components/reply-input.tsx   | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/views/issues/components/comment-input.tsx b/packages/views/issues/components/comment-input.tsx
index ad67015c4..daecb405a 100644
--- a/packages/views/issues/components/comment-input.tsx
+++ b/packages/views/issues/components/comment-input.tsx
@@ -57,7 +57,7 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
     <div
       {...dropZoneProps}
       className={cn(
-        "relative flex flex-col rounded-lg bg-card ring-1 ring-border",
+        "relative flex flex-col rounded-lg bg-card pb-8 ring-1 ring-border",
         isExpanded ? "h-[70vh]" : "max-h-56",
       )}
     >
@@ -72,7 +72,7 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
           currentIssueId={issueId}
         />
       </div>
-      <div className="flex items-center justify-end gap-1 px-1.5 pb-1">
+      <div className="absolute bottom-1 right-1.5 flex items-center gap-1">
         <Tooltip>
           <TooltipTrigger
             render={
@@ -82,9 +82,9 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
                   setIsExpanded((v) => !v);
                   editorRef.current?.focus();
                 }}
-                className="inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground opacity-70 hover:opacity-100 hover:bg-accent/60 transition-all cursor-pointer"
+                className="rounded-sm p-1.5 text-muted-foreground opacity-70 hover:opacity-100 hover:bg-accent/60 transition-all cursor-pointer"
               >
-                {isExpanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+                {isExpanded ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
               </button>
             }
           />
diff --git a/packages/views/issues/components/reply-input.tsx b/packages/views/issues/components/reply-input.tsx
index 66ab51a3d..cf0c1cbf2 100644
--- a/packages/views/issues/components/reply-input.tsx
+++ b/packages/views/issues/components/reply-input.tsx
@@ -89,6 +89,7 @@ function ReplyInput({
           isExpanded
             ? "h-[60vh]"
             : size === "sm" ? "max-h-40" : "max-h-56",
+          (!isEmpty || isExpanded) && "pb-7",
         )}
       >
         <div className="flex-1 min-h-0 overflow-y-auto">
@@ -102,7 +103,7 @@ function ReplyInput({
             currentIssueId={issueId}
           />
         </div>
-        <div className="flex items-center justify-end gap-1 text-muted-foreground transition-colors group-focus-within/editor:text-foreground">
+        <div className="absolute bottom-0 right-0 flex items-center gap-1 text-muted-foreground transition-colors group-focus-within/editor:text-foreground">
           <Tooltip>
             <TooltipTrigger
               render={