fix(dashboard): make the dashboard mobile friendly - #406
Merged
Conversation
On narrow viewports the always-visible sidebar kept its fixed footprint (200px minimum, 60px collapsed) and left page content squashed into the remaining sliver. Below the `md` breakpoint the sidebar now renders as an off-canvas drawer: hidden by default, opened from a new header menu button, overlaid on a dimming backdrop, and dismissed by the backdrop, Escape, or tapping a destination. Above the breakpoint the resizable, collapsible rail is unchanged. Also trims the main content padding on small screens. Fixes #351 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…obile Follow-up mobile polish for the three worst-offending pages: - StatCard: HeroUI's Card already pads its content, so Card.Content's extra padding was stacking and roughly doubling each tile's height (most obvious at two-up on mobile). Zero the card's own padding, let the content own a responsive value (tighter on mobile), drop the value font a step on mobile, and swap the fixed 180px min-width for min-w-0 so a tile fits its grid track instead of overflowing and overlapping its neighbour. - Usage: the tile row moves from flex-wrap (which wrapped one-up under the old min-width) to the same responsive grid as Overview, so two fit per row on mobile, three then four as the viewport grows. - Activity: the status/key/user/model controls collapse behind a "Filters" toggle on mobile (labelled with the active count) so the request table sits near the top; desktop still shows them inline. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Give the Usage page the same treatment as Activity: the user/model/key controls collapse behind a "Filters" toggle on mobile (labelled with the active count) so the stat tiles stay near the top, while the time-range presets stay visible and desktop keeps them inline. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
the
missing-template
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (23)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughChangesDashboard responsive navigation and analytics
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
web/src/components/AppShell.test.tsx (1)
51-108: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCover Escape and backdrop dismissal too.
The suite covers toggle, navigation, and breakpoint dismissal, but not the two other new close paths. A regression in either handler would still pass; add focused tests for Escape and backdrop clicks.
As per coding guidelines, add colocated Vitest tests for changed behavior.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/components/AppShell.test.tsx` around lines 51 - 108, Add focused Vitest tests in the AppShell test suite for the mobile drawer’s remaining dismissal paths: verify pressing Escape after opening the drawer restores the “Open navigation” button with aria-expanded="false", and verify clicking the backdrop does the same. Reuse the existing mockMatchMedia, renderShell, and userEvent setup, keeping the tests scoped to mobile behavior.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/gateway/static/dashboard/assets/index-UIREfPWa.js`:
- Line 2: Update the mobile drawer implementation in AppShell.tsx to use dialog
semantics with an accessible label, trap keyboard focus while open, restore
focus to the trigger on close, and remove aria-hidden from the clickable
backdrop while preserving its dismissal behavior. Rebuild the generated
dashboard asset so index-UIREfPWa.js reflects these changes.
In `@web/src/components/AppShell.tsx`:
- Around line 335-357: Update the mobile navigation flow in AppShell and the
drawer aside to manage focus: move focus into the drawer when mobileNavOpen
becomes true, trap Tab navigation within the open drawer, and restore focus to
the header trigger when it closes or is dismissed via the backdrop. Reuse the
existing asideRef and trigger references where available, and preserve the
current pointer-dismissal behavior.
---
Nitpick comments:
In `@web/src/components/AppShell.test.tsx`:
- Around line 51-108: Add focused Vitest tests in the AppShell test suite for
the mobile drawer’s remaining dismissal paths: verify pressing Escape after
opening the drawer restores the “Open navigation” button with
aria-expanded="false", and verify clicking the backdrop does the same. Reuse the
existing mockMatchMedia, renderShell, and userEvent setup, keeping the tests
scoped to mobile behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 049d6ce4-51d9-4848-99a8-3b106ad80b6b
📒 Files selected for processing (18)
src/gateway/static/dashboard/assets/ActivityPage-Cf11O_3u.jssrc/gateway/static/dashboard/assets/AliasesPage-BbaoB-1V.jssrc/gateway/static/dashboard/assets/BudgetsPage-DdYNyvZg.jssrc/gateway/static/dashboard/assets/KeysPage-D3V6UNN9.jssrc/gateway/static/dashboard/assets/ModelScopeControl-C5SNxO-8.jssrc/gateway/static/dashboard/assets/ModelsPage-B277uvbs.jssrc/gateway/static/dashboard/assets/OverviewPage-DHpyUyF2.jssrc/gateway/static/dashboard/assets/ProvidersPage-BsStIcYK.jssrc/gateway/static/dashboard/assets/SettingsPage-GH8RBCF8.jssrc/gateway/static/dashboard/assets/ToolsGuardrailsPage-BpqmGy8E.jssrc/gateway/static/dashboard/assets/UsagePage-DWHaiext.jssrc/gateway/static/dashboard/assets/UsersPage-C1HIumq5.jssrc/gateway/static/dashboard/assets/index-BnjHlMoS.csssrc/gateway/static/dashboard/assets/index-DHQmS-9o.jssrc/gateway/static/dashboard/assets/index-UIREfPWa.jssrc/gateway/static/dashboard/index.htmlweb/src/components/AppShell.test.tsxweb/src/components/AppShell.tsx
💤 Files with no reviewable changes (1)
- src/gateway/static/dashboard/assets/index-DHQmS-9o.js
Address review feedback on the drawer's accessibility: - Give it dialog semantics: role="dialog", an accessible name (aria-label="Navigation"), and aria-modal while open. - Manage focus: move focus into the drawer when it opens, restore it to the toggle when it closes (guarded so a breakpoint change to desktop does not yank focus to the now-hidden toggle), and trap Tab within the open drawer. - Mark the drawer inert while closed so its off-canvas links leave the tab order and the accessibility tree until it is opened. - Make the dimming backdrop a non-interactive div rather than an aria-hidden button (an aria-hidden interactive element is contradictory); pointer dismissal stays, keyboard users close with Escape. Covers the new close paths with tests (Escape + focus restore, backdrop, inert-while-closed). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
njbrake
force-pushed
the
fix/351-dashboard-mobile-friendly
branch
from
July 23, 2026 23:45
a858fdc to
639ceb3
Compare
njbrake
temporarily deployed
to
integration-tests
July 23, 2026 23:46 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
github-actions
Bot
removed
the
missing-template
There was a problem hiding this comment.
Pull request overview
Improves the standalone admin dashboard’s mobile responsiveness while keeping the desktop layout intact, primarily by turning the fixed sidebar into an off-canvas drawer on small viewports and tightening the layout of stats and filters on Usage/Activity pages.
Changes:
AppShell: render sidebar as an off-canvas, dismissible mobile drawer with focus management and a backdrop.StatCard: avoid tile overlap in mobile grids (min-w-0) and fix “double padding” height inflation with responsive spacing.UsagePage/ActivityPage: collapse filter controls behind a mobile “Filters” toggle and switch Usage tiles to a responsive grid layout; add Vitest coverage for these behaviors.
Reviewed changes
Copilot reviewed 22 out of 26 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/pages/UsagePage.tsx | Collapses filters behind a mobile toggle and switches stat tiles to a responsive grid. |
| web/src/pages/UsagePage.test.tsx | Adds tests for mobile filter disclosure toggle behavior and active-filter count labeling. |
| web/src/pages/ActivityPage.tsx | Collapses filters behind a mobile toggle to keep the table near the top on small screens. |
| web/src/pages/ActivityPage.test.tsx | Adds tests for Activity page mobile filter disclosure and active-filter count labeling. |
| web/src/components/ui.tsx | Updates StatCard sizing/padding to prevent mobile grid overflow and reduce tile height. |
| web/src/components/ui.test.tsx | Adds StatCard tests covering content rendering and class-based layout constraints. |
| web/src/components/AppShell.tsx | Implements responsive sidebar behavior (mobile drawer vs desktop rail), including focus trap and inert. |
| web/src/components/AppShell.test.tsx | Adds tests for mobile drawer open/close, dismissal, inert behavior, and breakpoint transitions. |
| src/gateway/static/dashboard/index.html | Updates hashed asset references for the rebuilt dashboard bundle. |
| src/gateway/static/dashboard/assets/UsersPage-C3W1M_ni.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/UsagePage-dAJO_Fnn.js | New rebuilt dashboard bundle chunk for Usage page. |
| src/gateway/static/dashboard/assets/UsagePage-BSmf3lNS.js | Removes old hashed bundle chunk (replaced by new build). |
| src/gateway/static/dashboard/assets/ToolsGuardrailsPage-DVHFF3d4.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/SettingsPage-CUKV2dFf.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/ProvidersPage-86e-uMd3.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/OverviewPage-BUBXx1gM.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/ModelScopeControl-Dyoe5t_D.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/KeysPage-BkipFYn1.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/BudgetsPage-BYrbbN1j.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/AliasesPage-CE454tSr.js | Rebuilt dashboard bundle output. |
| src/gateway/static/dashboard/assets/ActivityPage-Lz_fx7Hp.js | New rebuilt dashboard bundle chunk for Activity page. |
| src/gateway/static/dashboard/assets/ActivityPage-DLDDQ1lo.js | Removes old hashed bundle chunk (replaced by new build). |
Files not reviewed (3)
- src/gateway/static/dashboard/assets/ActivityPage-Lz_fx7Hp.js: Generated file
- src/gateway/static/dashboard/assets/UsagePage-dAJO_Fnn.js: Generated file
- src/gateway/static/dashboard/assets/index-kj8Waq7_.js: Generated file
khaledosman
reviewed
Jul 24, 2026
Member
There was a problem hiding this comment.
Makes the shell plus Overview/Usage/Activity mobile-friendly: off-canvas drawer with dialog semantics, StatCard overlap/double-padding fixes, and collapsible filters. Clean, and the drawer accessibility work is more thorough than typical. Two minor notes inline.
Confirmed non-issues while reviewing: the hidden + md:flex filter-region toggle relies on Tailwind's responsive-variant ordering, which correctly shows inline on desktop and collapses on mobile; inert as a boolean prop is React 19-supported and desktop passes undefined for all dialog attributes, so the rail is genuinely unchanged there; and the breakpoint-change effect plus the if (!isMobile) return focus-restore guard correctly avoid yanking focus to the hidden toggle.
Process: the committed src/gateway/static/dashboard/ bundle is in the diff, so CI's staleness check should pass — just confirm it was regenerated from these web/src changes.
🤖 Generated with Claude Code
khaledosman
approved these changes
Jul 24, 2026
Address reviewer feedback (khaledosman, Copilot): - True modality: mark the header and main inert while the mobile drawer is open, so the obscured background leaves the tab order and the accessibility tree (aria-modal alone is not universally honored, and the aside's own trap did not cover the header controls). - matchMedia: fall back to the deprecated addListener/removeListener when addEventListener is unavailable (Safari < 14 and other older engines), so the shell subscribes to breakpoint changes instead of throwing. - Test robustness: assert the stat tile's classes on its rendered root element rather than HeroUI's internal ".card" class, which a library update could rename. Add tests for the inert background and the legacy matchMedia path. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
njbrake
temporarily deployed
to
integration-tests
July 24, 2026 09:13 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
14 tasks
This was referenced Jul 26, 2026
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.
Description
The dashboard rendered well on desktop but looked squashed on mobile. This makes the shell and the three worst-offending pages mobile friendly, while leaving the desktop layout intact.
Sidebar (
AppShell): below themdbreakpoint the fixed-width sidebar (200px min, 60px collapsed) kept its footprint and crushed page content. It now renders as an off-canvas drawer, a proper accessible dialog: hidden by default, opened from a new header menu button, overlaid on a dimming backdrop, and dismissed by the backdrop, Escape, or tapping a destination. It carries dialog semantics (role, accessible name, aria-modal), moves focus in on open and restores it to the trigger on close, traps Tab while open, and is marked inert while closed so its off-canvas links leave the tab order. The resizable, collapsible rail is unchanged on desktop.Stat tiles (
StatCard): fixed the Overview overlap (a fixed 180px min-width was wider than the grid track at two-up on mobile, so tiles overflowed into each other; switched to min-w-0) and the oversized look (HeroUI's Card already pads its content andCard.Contentwas stacking another pad on top, roughly doubling each tile's height; zeroed the card's own padding and made the content padding and value font responsive). Tile height dropped from 132px to 100px.Usage and Activity: Usage tiles move from flex-wrap to the same responsive grid as Overview, so two fit per row on mobile. On both pages the status/key/user/model filter controls collapse behind a "Filters" toggle on mobile (labelled with the active-filter count) so the tiles and table sit near the top; the time-range presets stay visible and desktop shows the filters inline.
Verified with real screenshots at 390px (Overview, Usage, Activity in both filter states, and the drawer open) and with a scripted keyboard walk of the drawer (open moves focus in, Escape closes and restores focus to the toggle, nav closes on selection). Confirmed the desktop layout is unchanged.
PR Type
Relevant issues
Fixes #351. Part of #312 (responsive/mobile layout pass) and #299.
Checklist
web/src: drawer open/close/Escape/backdrop/inert and focus restore, stat-tile fit and padding, and the Usage/Activity filter disclosures. This is a frontend-only change, so there is nothing intests/unitortests/integrationto touch.)make lintandmake typecheckpass;npm --prefix web run typecheck,npm --prefix web test(230 passing), andnpm --prefix web run buildpass. No Python changed, so Pythonmake testis unaffected.)AI Usage
AI Model/Tool used: Claude Code (Claude Opus 4.8), directed by @njbrake.
Any additional AI details you'd like to share:
Implemented and verified by Claude via back-and-forth with @njbrake, who directed the work and reviewed the results. The reasoning and decisions are his; the code and this description are the agent's.
🤖 Generated with Claude Code
Summary