fix(web): Usage breadcrumb stays centered on small viewports

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Problem

Below the xl breakpoint, the Usage header used a two-row grid. The breadcrumb took the first row and the compact Limits, period, and refresh controls wrapped onto a second row. The header grew to 72–76px, so the breadcrumb sat about 18–20px above the line where every other workspace page centers its title and the sidebar header.

Fix

The breadcrumb and the compact controls now share one row in the existing minmax(0,1fr)_auto grid, so the header keeps the standard 52px height. The environment label already truncates, so it shrinks first on narrow windows. At around 360px it reads "A…" but stays clickable. The xl+ layout is unchanged.

Before / after

900px window with the sidebar open:

600px window with the sidebar collapsed:

Validation

• Measured in headless Chromium at 900, 600, and 360px. The breadcrumb's vertical offset from the header's center went from −18/−20px to 0 at every width, and the header stays at 52px.
• vp test run on UsagePage.test.tsx and UsagePage.refresh.test.tsx: 11 tests pass.

Made with Claude Opus 5.5 in Claude Code (via T3 Code).

[macroscopeapp]

Approvability

Verdict: Approved at 1cc347c

Macroscope's review found this PR approvable — This is a narrowly scoped responsive-layout fix in one existing component, changing only grid placement and spacing so the breadcrumb and mobile controls share a row. It leaves desktop layout, interaction logic, data behavior, and interfaces unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: c1fe7339-a908-48a3-b358-6ebe8d788a88

📥 Commits

Reviewing files that changed from the base of the PR and between d60a71e and 1cc347c.

📒 Files selected for processing (1)

• apps/web/src/components/usage/UsagePage.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The Usage page top bar removes its grid row gap. The breadcrumb and mobile control container no longer span both columns.

Changes

Usage page top-bar layout

Layer / File(s)	Summary
Update top-bar grid placement apps/web/src/components/usage/UsagePage.tsx	The top-bar grid removes its row gap. The breadcrumb and mobile control container no longer span both columns.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 1cc34

No actionable regression is established in the Usage header layout; mobile controls remain visible, and the desktop layout is unchanged.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	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 clearly describes the main change: centering the Usage breadcrumb on small viewports.
Description check	✅ Passed	The description explains the problem and fix, includes before-and-after screenshots, and reports focused validation. It does not include the required Scope and approval section or explain why this foc…
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.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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