mirror of
https://github.com/coder/coder.git
synced 2026-06-06 14:38:23 +00:00
fix(site/src/pages/AgentsPage): cap queued messages list height so chat scroll keeps working (#24950)
Linear: [CODAGT-313](https://linear.app/codercom/issue/CODAGT-313/unable-to-scroll-long-queued-messages-in-coder-agents) ## 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  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 ```diff - <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.*
This commit is contained in:
@@ -170,7 +170,12 @@ export const QueuedMessagesList: FC<QueuedMessagesListProps> = ({
|
||||
const isBusy = busyItem !== null;
|
||||
|
||||
return (
|
||||
<div className={cn("flex w-full flex-col", className)}>
|
||||
<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,
|
||||
)}
|
||||
>
|
||||
{visibleItems.map((item, index) => {
|
||||
const isEditing = item.id === editingMessageID;
|
||||
const isFirst = index === 0;
|
||||
|
||||
Reference in New Issue
Block a user