fix: keep agents desktop layout at 200% zoom#24699
Conversation
…tighten empty-state spacing Switches the agents empty-state layout breakpoint from md: (768 px) to sm: (640 px) so a 1440 px desktop at 200% browser zoom (720 px effective) stays on the desktop branch instead of collapsing into the mobile stack. Also bottom-aligns the empty-state content on every breakpoint (was center-aligned on desktop), tightens the stack gap between the org selector and chat input from gap-4 to gap-2, and removes the extra top margin on the 'Introductory access' footer so the chat input sits closer to the bottom of the screen.
jaaydenh
left a comment
There was a problem hiding this comment.
Deep review complete. Eight reviewers ran in parallel (test-auditor, edge-case-analyst, contract-auditor, frontend-reviewer, structural-analyst, modernization-ts, modernization-react, style-reviewer).
The layout fix is sound: consistent breakpoint shift across all three components, TDD-verified with Chromatic visual snapshots plus class-level assertions in vitest, and no P0/P1 correctness issues.
One P2 and a handful of lower-severity nits cluster around test brittleness in the two new Storybook stories. 1 P2, 1 P3, 3 nits across 5 inline comments.
(Deep review orchestrated by Coder Agents. Author is welcome to treat all findings as optional.)
Addresses deep review feedback on PR #24699: the new Storybook regression stories walked the DOM via class-name substrings (`flex-row`, `.rounded-2xl`) to locate the elements they measure. Five reviewers flagged this as brittle to refactors that touch Tailwind classes or wrap the composer in a new container. - Add `data-testid="agents-page-outer"` to the top-level flex container in AgentsPageView and have EmptyStateZoom200Desktop look it up with findByTestId instead of walking parents. - Add `data-testid="chat-composer"` to the composer wrapper in AgentChatInput and have OrgPickerTightSpacing look it up directly instead of `input.closest('.rounded-2xl')`. - Document the intentional breakpoint split at the only isBelowMdViewport() call site (layout uses sm: 640 px, dropdowns still use md: 768 px) so future readers understand the trade-off.
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a58eb86eb5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Restores sm:items-center on the empty-state container so the chat input sits in the vertical middle of the viewport on desktop. Keeps the rest of the layout fix: mobile stays bottom-aligned, the stack gap stays at gap-2, and the 'Introductory access' footer stays tight to the chat input.
|
/coder-agents-review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: aae17a23c0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
The breakpoint shift on the outer container is sound. The test approach is strong: computed-style assertions instead of class tokens, TDD-verified, Chromatic coverage at 720px. Clean diff with minimal footprint.
The core concern from the panel: the PR moved the page shell to sm: (640px) but child components still gate on md: (768px). At 720px, the exact viewport the PR targets (200% zoom on 1440px desktop), this creates a desktop-shaped page filled with mobile-styled internals: no sidebar header, no settings link, no user menu, redundant mobile back button. Six reviewers converged independently on the same finding. A specific sub-case: if a user collapses the sidebar at full zoom then zooms to 200%, the sidebar disappears with no expand button visible.
The PR description acknowledges the isBelowMdViewport/dropdown breakpoint split as intentional. The sidebar header, sidebar footer, ChatTopBar, AgentPageHeader, and plan-mode badge mismatches are not mentioned and appear unintentional.
2 P2, 4 P3, 4 Nit across 10 inline comments.
"The fix pulled one thread and left the rest attached. The page says 'desktop' while everything inside says 'mobile.'" (Hisoka)
site/src/pages/AgentsPage/components/AgentChatInput.tsx:1086
P3 [DEREM-10] Plan mode badge uses hidden md:inline-flex. At 640-767px the page is in desktop layout but this badge stays hidden. The user can toggle plan mode but gets no persistent visual indicator that it is active.
Same class of bug as DEREM-1/DEREM-3: partial breakpoint migration leaves this component at the old threshold. Fix: hidden sm:inline-flex. (Meruem)
🤖
🤖 This review was automatically generated with Coder Agents.
|
Addressed the latest review feedback in 7d916ee and updated the PR description. Summary: aligned shell-level agents breakpoints to sm, kept only full-width dropdown behavior at md with a clarified comment, strengthened 720 px Storybook regression coverage, removed the redundant sm:pb-4, and renamed the root layout test id. Targeted Storybook tests and full site lint passed locally. |
…e-zoom-layout # Conflicts: # site/src/pages/AgentsPage/components/AgentPageHeader.tsx
|
/coder-agents-review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 965f0f84d2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
All 10 R1 findings verified fixed. The breakpoint migration is now complete and consistent across the agents page tree. The regression stories are strong: computed-style assertions, positional checks, sidebar control visibility, and the collapsed-sidebar expand-button guard. Clean CI.
New findings are lighter: test gaps for two specific breakpoint fixes (ChatTopBar expand button and plan-mode badge at 720px), an API shape concern in ExpiredFileIdsContext, and one redundant Tailwind class. 5 P3, 1 Nit across 6 new items; 3 from Netero, 2 from Bisky, 1 from Knov, 1 from Nami. Mafuuu found no issues.
Mafuuu on the rapid-resize edge case: "Between the CSS state change and the React re-render, the meatball menu could be in the DOM while the children section is already styled as sm:flex. This race window is sub-frame and pre-existing."
🤖 This review was automatically generated with Coder Agents.
# Conflicts: # coderd/x/chatd/chatd_test.go
DanielleMaywood
left a comment
There was a problem hiding this comment.
Assuming sufficient manual testing on viewports, LGTM 
Fixes layout issues on the agents empty state page.
720 px, which was below the previous
md:breakpoint (768 px) andcollapsed the page into the mobile stack. Switching the page shell
and shell-level controls to the
sm:breakpoint (640 px) keeps thesidebar and chat area side-by-side at common zoom levels while
preserving the mobile stack for real phone viewports.
desktop branch, with tighter spacing so the chat input sits closer to
the bottom of the screen at 200% zoom.
gap-4(16 px) togap-2(8 px)and the footer paragraph drops its
mt-1, tightening the spacearound the organization selector, the chat input, and the
"Introductory access to Coder Agents through September 2026" line.
and the plan-mode badge now use the same
sm:desktop breakpoint asthe page shell. A collapsed sidebar can be expanded again at 640 to
767 px.
Dropdown full-width CSS (
@media (max-width: 767px)) and theisBelowMdViewporthelper are intentionally left at 768 px. Thosegovern dropdown UX rather than page layout, and the chat pane is still
narrow at 640 to 767 px after the sidebar is visible. The page is in
desktop mode in that range while dropdowns stay full-width.
Regression coverage in Storybook:
AgentsPageView.stories.tsx > EmptyStateZoom200Desktoppins a new720 px Chromatic viewport and asserts the rendered layout is
horizontal, the sidebar is left of the main panel, and the sidebar
header/footer controls are visible.
AgentsPageView.stories.tsx > CollapsedSidebarZoom200Desktoppinsthe same 720 px viewport and asserts the expand-sidebar control is
visible when the sidebar is collapsed.
AgentCreateForm.stories.tsx > OrgPickerTightSpacingmeasures thevertical gap between the org selector row and the chat-input
composer and expects it to stay below 16 px.
Generated by Coder Agents.