feat(web): responsive + mobile pass over the dashboard#129
Merged
CoderCoco merged 11 commits intoMay 10, 2026
Conversation
…on mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…mobile nav test
Add `prefix` prop to NavSections so desktop ("desktop-nav-*") and mobile
("mobile-nav-*") heading ids are unique when both are in the DOM, fixing
an HTML validity violation and broken aria-labelledby. Add id="mobile-nav"
to the drawer aside and aria-controls="mobile-nav" to the hamburger button.
Add min-w-0 to the main content flex child to prevent horizontal overflow
from wide content. Fix the "nav link closes drawer" test to click the
drawer link (index 1) rather than the desktop sidebar link (index 0), and
update the stale LiveIndicator test description.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Wraps the existing sortable table in `hidden md:block` and adds a `md:hidden` card-stack view above it so the 6-column estimates table doesn't overflow on narrow screens. Also makes the filter input full-width on mobile (`w-full sm:w-64`). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add filtersOpen state to LogsPage and restructure the controls row into a two-part layout: a top bar (always visible) showing the game selector, a mobile-only Filters toggle button, desktop-inline filter controls via md:contents, and the pause/resume button; plus a collapsible drawer (mobile only) that reveals search, level filter, and autoscroll when the toggle is open. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… targets - app-layout: always render mobile drawer in DOM so aria-controls="mobile-nav" has a valid target; toggle visibility with hidden + aria-hidden instead of conditional render - app-layout: fix TSDoc comment (< md → "below the md breakpoint") to avoid ESLint tsdoc HTML-tag parse error - dialog: replace mx-4 sm:mx-0 with w-[calc(100%-2rem)] sm:w-full so fixed- positioned dialogs are actually constrained in width on mobile - logs: revert filter drawer to conditional render (fixes duplicate-element test failures); drop aria-controls since target is absent when collapsed; keep aria-expanded and add min-h-11 touch target to Filters toggle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
375px and 1280px viewport captures of Dashboard and Costs pages, taken via Chrome DevTools emulation against the built vite preview. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the @gsd/web UI responsiveness and mobile usability across key operator surfaces (layout navigation, logs, costs, and Discord pages), aligning the dashboard experience with small-screen/touch-first constraints.
Changes:
- Adds a mobile off-canvas navigation drawer (hamburger menu) while keeping the existing desktop sidebar for
md+. - Reworks mobile layouts: logs filters collapse into a drawer, costs estimates switch to a mobile card stack, and Discord tables become horizontally scrollable.
- Fixes small-viewport UI issues (dialog sizing/scrolling, KPI strip breakpoint adjustment, and larger touch targets on game card actions).
Reviewed changes
Copilot reviewed 8 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| app/packages/web/src/pages/logs.page.tsx | Adds a mobile-only filters drawer while keeping desktop inline controls. |
| app/packages/web/src/pages/discord.page.tsx | Wraps tables in overflow-x-auto to prevent viewport overflow on small screens. |
| app/packages/web/src/pages/costs.page.tsx | Renders a mobile card stack for estimates below md, retaining the sortable table at md+. |
| app/packages/web/src/components/ui/dialog.component.tsx | Adjusts dialog width/height to fit small viewports and enables internal scrolling. |
| app/packages/web/src/components/kpi-strip.component.tsx | Moves the 4-column KPI breakpoint from lg to md. |
| app/packages/web/src/components/game-card.component.tsx | Increases touch target sizing for the copy-connect action. |
| app/packages/web/src/components/app-layout.component.tsx | Implements mobile hamburger + drawer navigation and responsive top bar spacing/content. |
| app/packages/web/src/components/app-layout.component.test.tsx | Adds tests covering opening/closing the new mobile navigation drawer. |
Comment on lines
+169
to
+173
| await user.click(screen.getByRole('button', { name: 'Open navigation' })); | ||
| const logsLinks = screen.getAllByRole('link', { name: 'Logs' }); | ||
| // Click the drawer's Logs link (index 1 — desktop sidebar's link is rendered first in DOM) | ||
| await user.click(logsLinks[1]!); | ||
| expect(screen.queryByRole('button', { name: 'Close navigation' })).not.toBeInTheDocument(); |
Owner
Author
There was a problem hiding this comment.
Fixed in bf4f965 — replaced getAllByRole(...)[1] with within(document.getElementById('mobile-nav')!).getByRole('link', { name: 'Logs' }) as suggested.
Generated by Claude Code
Replace brittle getAllByRole(...)[1] index with within(#mobile-nav) so the test is resilient to DOM order changes. https://claude.ai/code/session_013fhJsbUuGX25MiAjfqdo1D
CoderCoco
deleted the
worktree-claude+issue-70-responsive-mobile-dashboard
branch
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
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.
Closes #70
Summary
mdbreakpoint; always rendered in DOM soaria-controlsis valid, toggled withhidden+aria-hiddensmand 1-col atxs; transitions to 4-col atmdinstead oflgmd, full sortable table aboveoverflow-x-autoso they scroll horizontally rather than overflow the viewportw-[calc(100%-2rem)] sm:w-fullso modals don't overflow a 375 px viewportsm; Refresh button collapses to icon-onlyScreenshots
Dashboard
Costs
Test plan
npm run app:test— 480/480 passingnpm run app:build— clean Vite build