fix(dashboard): wrap usage stat tiles into a responsive grid on mobile

[njbrake]

Description

On phone widths the usage page's seven stat tiles all squeezed onto a single row instead of wrapping, leaving them unreadably narrow. Root cause: StatCard is flex-1 with min-w-0 (deliberately sized by its container track, per its own comment), and the usage page wrapped them in flex flex-wrap; with a zero flex basis and no minimum width the items shrink forever, so wrapping never triggers.

The tiles now use the same responsive grid as the overview page (grid-cols-2, sm:grid-cols-3, xl:grid-cols-4), which is the container shape StatCard was designed for.

Verified in a scripted 390px viewport: two tiles per row across four rows, no horizontal overflow; at 1440px the tiles sit 4+3 with no overflow.

PR Type

• New Feature
• Bug Fix
• Refactor
• Documentation
• Infrastructure / CI

Relevant issues

None filed; reported directly by the maintainer from a deployed instance in mobile view.

Checklist

• I understand the code I am submitting.
• I have added or updated tests that cover my change (layout-only class change; the full web suite passes 285/285 and the layout was verified in a real browser at mobile and desktop widths).
• I ran the Definition of Done checks locally (npm --prefix web run typecheck and npm --prefix web test pass; dashboard bundle rebuilt and committed; no Python touched).
• Documentation was updated where necessary (inline comment explains why a wrapping flex row cannot work with StatCard's sizing).
• If the API contract changed, I regenerated the OpenAPI spec (no API change).

AI Usage

• No AI was used.
• AI was used for drafting/refactoring.
• This is fully AI-generated.

AI Model/Tool used: Claude Code (Claude Fable 5)

Any additional AI details you'd like to share:

Diagnosed and fixed by Claude Code under njbrake's direction from his report of the mobile layout; verified with scripted browser checks at 390px and 1440px viewports.

• I am an AI Agent filling out this form (check box if true)

🤖 Generated with Claude Code

Summary

• Updated the usage dashboard statistic tiles to use a responsive grid.
• Tiles now display in two columns on phones, three on medium screens, and four on large screens.
• Regenerated dashboard assets to reference the updated build files.

This prevents tiles from becoming too narrow and avoids horizontal overflow on small screens.

[coderabbitai]

Walkthrough

The Usage tiles now use responsive grid columns. Generated dashboard bundles and the HTML entrypoint reference updated hashed assets, while compiled component logic remains unchanged.

Changes

Dashboard updates

Layer / File(s)	Summary
Responsive Usage tiles layout web/src/pages/UsagePage.tsx	The Tiles container changes from wrapping flexbox to a responsive two-, three-, and four-column grid.
Generated dashboard bundle wiring src/gateway/static/dashboard/index.html, src/gateway/static/dashboard/assets/*	Dashboard entrypoint, preload mappings, lazy imports, and compiled module dependencies are retargeted to new hashed asset filenames without changing component logic.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• mozilla-ai/otari#345: Related to the Usage & Analytics UsagePage implementation.
• mozilla-ai/otari#373: Related dashboard hashed-bundle regeneration.
• mozilla-ai/otari#406: Also changes the Usage tiles layout to a responsive grid.

Suggested reviewers: khaledosman

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.46% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title uses a valid conventional-commit style fix(scope) prefix and clearly describes the mobile usage tile layout change.
Description check	✅ Passed	The description follows the template and includes the required sections with substantive details, verification, checklist items, and AI usage.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch usage_mobile_cards

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch usage_mobile_cards

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

web/src/pages/UsagePage.tsx (1)

652-656: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add a regression test for the responsive tiles layout.

web/src/pages/UsagePage.test.tsx verifies that tile content renders, but not that the container uses the responsive grid. Add a focused Vitest assertion or viewport/visual test so a future regression to flex-wrap is caught.

As per coding guidelines, changes under web/src/**/*.{ts,tsx,css} must include 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/pages/UsagePage.tsx` around lines 652 - 656, Add a colocated Vitest
regression test in UsagePage.test.tsx that renders UsagePage and asserts the
tiles container uses the responsive grid classes, including grid-cols-2,
sm:grid-cols-3, and xl:grid-cols-4, rather than a wrapping flex layout. Keep the
test focused on the responsive layout behavior and preserve existing
tile-content assertions.

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.

Nitpick comments:
In `@web/src/pages/UsagePage.tsx`:
- Around line 652-656: Add a colocated Vitest regression test in
UsagePage.test.tsx that renders UsagePage and asserts the tiles container uses
the responsive grid classes, including grid-cols-2, sm:grid-cols-3, and
xl:grid-cols-4, rather than a wrapping flex layout. Keep the test focused on the
responsive layout behavior and preserve existing tile-content assertions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ff43ff2f-b3d1-40d4-9c86-a312b2998b32

📥 Commits

Reviewing files that changed from the base of the PR and between 4685d03 and 83f5de2.

📒 Files selected for processing (17)

• src/gateway/static/dashboard/assets/ActivityPage-B6j_aVh9.js
• src/gateway/static/dashboard/assets/AliasesPage-Chlhfn8l.js
• src/gateway/static/dashboard/assets/BudgetsPage-BAJNRbKO.js
• src/gateway/static/dashboard/assets/ConfirmDialog-CCJnWoSc.js
• src/gateway/static/dashboard/assets/KeysPage-D5EjvMLy.js
• src/gateway/static/dashboard/assets/ModelScopeControl-Dz7NaZdS.js
• src/gateway/static/dashboard/assets/ModelsPage-rWHJVsLp.js
• src/gateway/static/dashboard/assets/OverviewPage-qo0xwTL4.js
• src/gateway/static/dashboard/assets/ProvidersPage-BKCHydlE.js
• src/gateway/static/dashboard/assets/SettingsPage-D0bz-SUp.js
• src/gateway/static/dashboard/assets/TablePagination-DlTV4kUZ.js
• src/gateway/static/dashboard/assets/ToolsGuardrailsPage-BVn9h5wq.js
• src/gateway/static/dashboard/assets/UsagePage-DOWOrs0n.js
• src/gateway/static/dashboard/assets/UsersPage-B7fcuwaB.js
• src/gateway/static/dashboard/assets/index-BzgMrLHf.js
• src/gateway/static/dashboard/index.html
• web/src/pages/UsagePage.tsx