fix(web): usage title lines up with the titlebar on narrow windows

[MatthewFeroz]

Problem

When the window is narrower than the xl breakpoint (1280px), the Usage page header wraps its controls (metric, period, refresh) onto a second row and grows taller than the titlebar. The Usage / All environments breadcrumb then sits at the top of that taller header. It ends up 8px above the sidebar toggle (and above the macOS traffic lights in desktop), which stay centered on the 52px titlebar.

To reproduce, open Usage in a window narrower than 1280px with the sidebar collapsed.

Change

In the wrapped layout, the breadcrumb row is now exactly --workspace-topbar-height tall and centers its content, so it lines up with the titlebar controls. The controls row stays below it. The single-row xl layout is unchanged.

Because the fix uses the shared titlebar-height variable, it also holds on Windows with the window-controls overlay, where that height comes from env(titlebar-area-height).

Scope and approval

This is a one-file, CSS-only fix for an obvious visual misalignment on one page, with no behavior change. It qualifies as a very small, focused fix of an obvious bug, so there is no linked issue.

Verification

Before and after were captured in the same flow: the real web app, the same dev server and data, Limits view, sidebar collapsed, 880px viewport. For "before", only UsagePage.tsx was temporarily reverted to main.

The dashed line marks the sidebar toggle's vertical center. Measured with getBoundingClientRect:

	Title center	Sidebar toggle center
Before	18px	26px
After	26px	26px

Full screenshots

Before

After

• vp lint and vp fmt pass on the changed file.
• How the evidence was captured: resizing the Browser panel kept disconnecting the browser host, so the page was loaded at 880px in a same-origin iframe and scaled up 1.745× with a CSS transform for legibility. The iframe gets its own 880px viewport, so the app's real breakpoints apply. The guide line and labels were added afterwards.
• The Electron shell and the Windows window-controls overlay were not run. They use the same WorkspacePageHeader and titlebar-height variable that this fix aligns to.

🤖 Generated with Claude Code (Claude Opus 5.5)

[macroscopeapp]

Approvability

Verdict: Approved at aa1c5fb

Macroscope's review found this PR approvable — This one-file responsive layout adjustment only changes Usage page alignment below the xl breakpoint while preserving the existing wide layout. It uses existing titlebar sizing tokens and introduces no schema, security, deployment, or static-analysis changes.

^{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: 34be5042-d58d-4e29-ae14-4af7d68f560b

📥 Commits

Reviewing files that changed from the base of the PR and between 250e052 and aa1c5fb.

📒 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 now uses responsive layout rules. The breadcrumb has a fixed height below extra-large widths and automatic height at extra-large widths.

Changes

Usage page top bar

Layer / File(s)	Summary
Responsive top bar layout apps/web/src/components/usage/UsagePage.tsx	The top bar uses a two-column grid with reduced bottom padding. The breadcrumb has a fixed height below extra-large widths and automatic height at extra-large widths.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to aa1c5

No actionable merge-blocking issue is established in this responsive header change.

🚥 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
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.
Title check	✅ Passed	The title clearly describes the main change: aligning the Usage page title with the titlebar in narrow windows.
Description check	✅ Passed	The description covers the problem, change, scope and approval rationale, and verification. It includes before-and-after screenshots, focused checks, and limitations.

• 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.}

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Thanks for this! The same Usage header misalignment on narrow windows was just fixed on main by #15552, which keeps the breadcrumb and the compact controls on one 52px row so the title lines up with the sidebar header. Closing this one as superseded. If you still see the breadcrumb off-center after #15552, please open an issue with a screenshot.