Skip to content

Commit 8a14c47

Browse files
🤖 fix: cap expanded queued message height and make it scrollable (#3057)
## Summary Cap the expanded queued message content at `40vh` and make it scroll on overflow, so long queued messages no longer push the composer off-screen. ## Background When a queued message is expanded and its content exceeds viewport height, the entire `ChatInputPane` grows unbounded—the Edit/Send now buttons and the composer itself get displaced below the fold. This is the same class of overflow that `AttachedReviewsPanel` already handles with a viewport-relative height cap. ## Implementation Wrapped `<UserMessageContent>` inside the expanded `QueuedMessageCard` in an inner `<div className="max-h-[40vh] overflow-y-auto">` scroll container. The action row (`Edit` / `Send now`) stays outside that wrapper so controls remain always visible while the message body scrolls independently. --- _Generated with `mux` • Model: `anthropic:claude-opus-4-6` • Thinking: `xhigh` • Cost: `$2.02`_ <!-- mux-attribution: model=anthropic:claude-opus-4-6 thinking=xhigh costs=2.02 -->
1 parent 343a31b commit 8a14c47

File tree

1 file changed

+9
-6
lines changed

1 file changed

+9
-6
lines changed

src/browser/features/Messages/QueuedMessage.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,15 @@ export const QueuedMessage: React.FC<QueuedMessageProps> = ({
8282
className="border-border-medium bg-background-secondary/80 rounded-md border px-2.5 py-1.5"
8383
data-component="QueuedMessageCard"
8484
>
85-
<UserMessageContent
86-
content={preview.sanitizedText || preview.fallbackLabel}
87-
reviews={message.reviews}
88-
fileParts={message.fileParts}
89-
variant="queued"
90-
/>
85+
{/* Keep queued drafts bounded so long content never pushes the composer off-screen. */}
86+
<div className="max-h-[40vh] overflow-y-auto">
87+
<UserMessageContent
88+
content={preview.sanitizedText || preview.fallbackLabel}
89+
reviews={message.reviews}
90+
fileParts={message.fileParts}
91+
variant="queued"
92+
/>
93+
</div>
9194

9295
<div className="mt-1 flex flex-wrap items-center justify-end gap-x-2 gap-y-0.5">
9396
{onEdit && (

0 commit comments

Comments
 (0)