fix(issues): restore compact single-line reply editor, keep expand overlap fix (#1562)

#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>
This commit is contained in:
Naiyuan Qing
2026-04-23 17:37:36 +08:00
committed by GitHub
parent 5ef957ca1b
commit 502add4bd1
2 changed files with 6 additions and 5 deletions

View File

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

View File

@@ -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={