fix(mobile): optimize responsive layouts across screens

[studert]

Fix horizontal-overflow and cramped layouts on narrow (≈375px) viewports
that surfaced after the Nothing redesign.

Root cause of the reported Claude user-detail bug: the lg:grid-cols-2
card grids holding the wide whitespace-nowrap model-breakdown table had
grid cells defaulting to min-width:auto, so the table's intrinsic width
expanded the track (and the whole page) past the viewport instead of
letting the table's own overflow-x-auto engage. Add min-w-0 to those
cells on the Claude user/workspace detail pages and the users list.

Other fixes:

• Make Settings / Copilot / Reports tab bars scroll horizontally instead
  of overflowing the viewport.
• Stack page headers and wrap action-button groups on mobile (Users,
  Invoices, Assignments, User detail, Request detail, profile cost card).
• Collapse fixed two-column definition grids and the dense grid-cols-5
  sync summary to single/fewer columns on mobile.
• MonthPicker / workspace select go full-width below sm; license-template
  rows stack; budget edit controls wrap.
• Harden dashboard chart cells with min-w-0 to prevent mid-width overflow.

https://claude.ai/code/session_01Cdqk8njUrmV66qC9GGF6Ad

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ai-developer-hub	Ready	Preview, Comment	Jun 2, 2026 5:31pm

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull request overview

This PR improves mobile responsiveness after the Nothing redesign by preventing horizontal overflow (notably for wide tables/charts inside CSS grid/flex layouts) and by making page headers/action bars/tab bars wrap or scroll appropriately on narrow viewports.

Changes:

• Add min-w-0 / w-full / flex-wrap adjustments to prevent intrinsic-width children (charts, tables, long text) from forcing page overflow.
• Make Settings/Copilot/Reports tab bars horizontally scrollable with hidden scrollbars.
• Reflow multiple page headers and dense grids to stack/wrap on small screens.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/profile/month-picker.tsx	Make the month select full-width on mobile to avoid cramped controls.
src/components/profile/cost-tracking-section.tsx	Stack/wrap header controls on small screens; minor formatting.
src/components/dashboard/viewer/my-usage-card.tsx	Add min-w-0 to chart cell to prevent mid-width overflow; formatting.
src/components/dashboard/admin/spend-trend-card.tsx	Add min-w-0 to chart container to prevent overflow; formatting.
src/components/claude/workspace-budget-list.tsx	Wrap action buttons on small screens; formatting cleanup.
src/components/claude/global-metrics-client.tsx	Make workspace selector full-width on mobile; formatting cleanup.
src/app/users/page.tsx	Stack/wrap Users page header and actions on mobile.
src/app/users/[id]/user-detail-client.tsx	Make user header wrap/break long text; wrap button groups; formatting cleanup.
src/app/settings/sync/github-member-sync-sheet.tsx	Reduce summary grid columns on mobile; minor formatting.
src/app/settings/settings-nav.tsx	Make settings tabs horizontally scrollable with hidden scrollbar; prevent overflow.
src/app/settings/license-templates/templates-client.tsx	Stack template rows on mobile and prevent truncation overflow; formatting.
src/app/requests/[id]/request-detail-client.tsx	Collapse definition grids to single column on mobile; wrap action bar controls; formatting.
src/app/reports/reports-nav.tsx	Make reports tabs horizontally scrollable with hidden scrollbar; prevent overflow.
src/app/invoices/page.tsx	Stack/wrap invoices header actions on mobile.
src/app/copilot/copilot-tab-bar.tsx	Make copilot tabs horizontally scrollable with hidden scrollbar; prevent overflow.
src/app/copilot/analytics/page.tsx	Add min-w-0 wrappers for chart cells; format empty/error states.
src/app/claude/workspaces/[workspaceId]/workspace-detail-client.tsx	Add min-w-0 to grid cards and wrap text to prevent overflow; improve mobile wrapping.
src/app/claude/users/page.tsx	Add min-w-0 wrappers around dashboard widgets; minor text wrapping.
src/app/claude/users/[userId]/user-detail-client.tsx	Add min-w-0 to grid cards to allow internal horizontal scrolling where needed; minor formatting.
src/app/assignments/assignments-client.tsx	Stack/wrap header/action controls on mobile; formatting cleanup.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.