Skip to content

fix(site/src/pages/AgentsPage): cap queued messages list height so chat scroll keeps working#24950

Merged
bpmct merged 2 commits into
mainfrom
bpmct/codagt-313-scroll-queued-messages
May 5, 2026
Merged

fix(site/src/pages/AgentsPage): cap queued messages list height so chat scroll keeps working#24950
bpmct merged 2 commits into
mainfrom
bpmct/codagt-313-scroll-queued-messages

Conversation

@bpmct
Copy link
Copy Markdown
Member

@bpmct bpmct commented May 4, 2026

Linear: CODAGT-313

Summary

When many messages are queued in the agent chat, the chat history becomes unscrollable: mouse wheel and scrollbar drag both stop responding.

The input wrapper in AgentChatPageView.tsx:496 is shrink-0 overflow-y-auto with no max-height, so overflow-y-auto is a no-op and the section grows unbounded as QueuedMessagesList adds rows. Its sibling ChatScrollContainer is flex-1 min-h-0, so it absorbs the shrinkage and clientHeight collapses to 0. The chat list is then a zero-height viewport with nothing to scroll.

Measured against the actual AgentChatPageView rendered in Storybook with 20 queued messages (1280x800):

scroll-container clientHeight input wrapper height scrollable?
0 queued 502 px 270 px yes
20 queued, main 0 px 1182 px no
20 queued, this PR 258 px 502 px yes

Demo

scroll fix side-by-side

Left (main): wheel-up does nothing because the chat scroll container has been crushed to zero height.
Right (this PR): the queued list scrolls inside its own pane and the chat history scrolls normally.

Recording is AgentChatPageView rendered through Storybook with the production component source. The same gesture (wheel-up over the chat history, then wheel-down over the queued list) is applied to both sides. Source for the recording is in bpmct/codagt-313-assets.

Change

-		<div className={cn("flex w-full flex-col", className)}>
+		// Cap the queue at ~40% of the small viewport so a long queue
+		// does not push the chat history's scroll container down to
+		// zero height (CODAGT-313). The list scrolls inside its own pane.
+		<div
+			className={cn(
+				"flex w-full flex-col max-h-[40svh] overflow-y-auto [scrollbar-gutter:stable] [scrollbar-width:thin] [scrollbar-color:hsl(var(--surface-quaternary))_transparent]",
+				className,
+			)}
+		>

Why this spot, not the outer wrapper

The composer textarea already self-caps at max-h-[50vh] in ChatMessageInput.tsx:688, so the only unbounded growth source in the input section is the queued list. Capping the list keeps the constraint colocated with the component that owns it, and any future consumer of QueuedMessagesList is automatically safe.

40svh (small viewport height) so the queue doesn't fight with the iOS keyboard once it appears, matching the h-dvh decision in #24848.


Generated by Coder Agents.

…at scroll keeps working

When many messages were queued the input section grew unbounded. The
sibling ChatScrollContainer is flex-1 min-h-0 so it absorbed the
shrinkage and clientHeight collapsed to 0, leaving the chat history
unscrollable.

QueuedMessagesList now caps itself at 40svh and scrolls inside its own
pane. The composer textarea already self-caps at max-h-[50vh].

Linear: CODAGT-313

Generated by Coder Agents.
@bpmct bpmct removed their assignment May 4, 2026
@bpmct bpmct requested a review from kylecarbs May 5, 2026 12:45
Comment on lines +173 to +175
// Cap the queue at ~40% of the small viewport so a long queue
// does not push the chat history's scroll container down to
// zero height (CODAGT-313). The list scrolls inside its own pane.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need the comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dropped in cef5d41. Thanks!

@bpmct bpmct merged commit 63db689 into main May 5, 2026
25 of 27 checks passed
@bpmct bpmct deleted the bpmct/codagt-313-scroll-queued-messages branch May 5, 2026 13:05
@github-actions github-actions Bot locked and limited conversation to collaborators May 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants