Repository navigation
fix(dashboard): list rows no longer overlap at 768 px with the Systems sidebar open (#3465) - #3482
Merged
Merged
Conversation
…wide enough for it (#3465) At a 768 window with the systems rail open the list is about 496px wide. The tablet row switched on a viewport `md:` alone, and its second line (three reserved toggles, success bar, capacity meter, task counts) needs about 610px: the `flex-1 min-w-0` success cell collapsed to 0 with its percentage painted over the meter, and the no-wrap task counts ran 50-67px past the row's right edge. The tablet row now also requires the list container to be at least 40rem (`list-mid:`, a second variant on the existing `agent-list` container the desktop grid already queries); below that the compact row renders, the one every window under 768 already gets. Nothing changes below `md`, at a 768 window with the rail collapsed (664px), or at 1440 (desktop grid). `list-mid` is registered before `list-wide` so `md:list-wide:hidden` is emitted after `md:list-mid:flex`. Test: tests/unit/agentListLayoutSwitch.spec.js mounts AgentListPanel, compiles the rendered classes through the real tailwind.config.js and resolves the `display` cascade per (window, list) width. Red under mutation: reverting the fix fails "the reported case: a 768 window with the rail open gets the compact row" (expected ['md'] to equal ['base']); registering the variants in the other order fails the every-width case (['lg','md'] at a 1088px list). e2e/dashboard-list-view.spec.js gains the browser-side geometry case (no cell overlaps or leaves its row at 768, rail open and collapsed). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The tablet row switched on the viewport (
md:) alone, while the desktop grid already switches on the list container's width. With the rail open at 768 the list is 496 px, too narrow for the tablet row's fixed parts. A newlist-midcontainer variant (40rem) gates the tablet row, and the compact row is its exact complement, so a narrow list gets the compact row regardless of window width. In that case the Read-Only and Autonomy toggles, success bar and capacity meter are not on the row, as on phones.Part of the UI sweep epic #3471.
Related Issue
Fixes #3465
Journey Impact
Journey Impact: none: bug fix to existing behaviour found by the UI sweep; no journey promise is added or changed
Type of Change
Testing
Mutation:
agentListLayoutSwitch.spec.js— 2 red with the fix reverted (including the reported 768-with-rail-open case), 1 red with the container variants registered in the other order, 2 red with the compact row back tomd:hidden. Restored byte-identical. The spec mountsAgentListPaneland resolves the display cascade through the real Tailwind config for simulated window and list widths.UI verification: on a preview frontend over a live local backend, 10 rows: at 768 with the rail open the list is 496 px and every row shows the compact layout with no sibling intersections, nothing past the row edge and no horizontal page scroll (light and dark); at 768 with the rail collapsed the tablet row shows with no overlap; 1440 keeps the desktop grid with header and row columns aligned; a rail-open sweep at 700, 768, 820, 900, 1024 and 1100 shows exactly one layout per row at every width. The two new Playwright e2e cases in
e2e/dashboard-list-view.spec.jswere not executed locally.Checklist
🤖 Generated with Claude Code