[nateEc]

Problem

Fixes #24113. Usage chooses its full header controls from the viewport width, even when a wide sidebar leaves the header only about 640px. The controls shrink and overflow left over the environment/provider breadcrumb. This is a focused layout correction to the existing controls, with no new workflow or product default.

Change

Use the Usage header's own content width for the existing compact/full control variants and date label. Keep the controls from shrinking into the breadcrumb. The change is limited to UsagePage; shared page headers and other pages are unchanged.

Verification

• Reproduced in the real web client on an isolated development server: at a 1422px viewport and approximately 760px sidebar, Cost/Tokens and the period buttons overlap the breadcrumb. Environment selection is cleared in the evidence to avoid exposing personal usage data; the same defect reproduces with the environment selected.
• After: the same layout uses compact selects without overlap. At the minimum approximately 640px header width, the breadcrumb and metric control remain separated by 12px. Checked both sides of the full-control breakpoint (approximately 901px and 941px outer header width) and a narrow sidebar/full-width header.
• Operated metric and period controls: Cost → Limits disables the period, Limits → Tokens enables it, and selecting 7 days persists when expanding back to full controls. Collapsing the sidebar exposes the date label without overlap.
• vp run check:changed: format, lint, unused-code check, and affected web/client-runtime typechecks passed. No static markup or class-name test is used as a substitute for the actual layout verification.
• Surface scope: web and Electron share this Usage layout; only the web client was run. Native mobile has a separate UI and is unchanged. No provider, contract, server, remote/tunnel, or documentation behavior changes. Native Electron/window-control insets and mobile were not exercised.

Before — narrow content area

After — same content area

After — wider content area, selected metric and period retained

Model and harness: GPT-5-based Codex / Codex desktop.

Evidence (maintainer)

Web only. Before eb1510d249; After 37a7baecae.

Fixture matrix · Full captures, crops, diffs, recordings and environment logs.

16/16 static pairs, 82 interaction checkpoint pairs, eight narrated recordings. Identical synthetic fixtures, frozen clock, viewport/sidebar/scroll/theme; Chromium 148, DPR 1, 100% font scaling. All stability partners are pixel-identical after ≥500ms. Exact amplified and threshold >16 diffs are linked in the capture report. What else changed: zero pixels outside the header.

Audit: SUFFICIENT for retained web visual evidence; independent exact rebuild: zero changed pixels. Required rows unverified: none.

Execution limitation: two initial discovery usage-summary requests reached native usage scanning before the synthetic adapter was installed. Their responses/caches were quarantined and excluded from uploads. Retained captures and the fail-closed audit rebuild use verified synthetic replies. This run does not certify synthetic-only execution. The audit also discloses a legacy manifest-hash metadata discrepancy; image bytes and canonical provenance were verified.

Light header crops (whole surfaces and both diff variants in the report):

Fixture	Before	After
H1/light
H2/light
H3/light
H4/light
D1/light
D2/light
D3/light
D4/light

Dark header crops (whole surfaces and both diff variants in the report):

Fixture	Before	After
H1/dark
H2/dark
H3/dark
H4/dark
D1/dark
D2/dark
D3/dark
D4/dark

Narrated Xvfb/ffmpeg interactions (metric/period changes and sidebar crossings):

Sequence/theme	Before	After
I1/light	I1-light-before.mp4	I1-light-after.mp4
I1/dark	I1-dark-before.mp4	I1-dark-after.mp4
I2/light	I2-light-before.mp4	I2-light-after.mp4
I2/dark	I2-dark-before.mp4	I2-dark-after.mp4

Verification log

• Reviewer A: FIX_FIRST, evidence gap only; no concrete source defect or failing input. Reviewer B: MERGE, no concrete defect. Neither found a sensitive-surface change.
• Fresh proof audit: SUFFICIENT after inspecting all 98 pairs and eight recordings; exact rebuild zero pixels. No missing required rows or recapture request.
• Source unchanged; no new tests, commits or pushes. Provider ingestion and supplemental loading/error/permission states are unverified.
• Model/harness: gpt-6.1-sol / Codex in T3 Code. Execution-isolation violation remains disclosed above.

[macroscopeapp]

Approvability

Verdict: Approved at 37a7bae

Macroscope's review found this PR approvable — This is a small, self-contained Usage header layout fix that switches existing controls based on the header’s available width instead of the viewport. It changes presentation only, with no new workflow, data behavior, schema, or production configuration.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: eb1510d
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 64190e2d-e3b4-4959-9b22-0d1a8fb6283a

📥 Commits

Reviewing files that changed from the base of the PR and between eb1510d and 37a7bae.

📒 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; 2 remain after this review.

📝 Walkthrough

The Usage page header now uses a named container for responsive layout. Its top-bar layout, date label, and controls switch at container-width breakpoints instead of viewport breakpoints.

Changes: Usage header layout

Layer / File(s)	Summary
Container-based header layout apps/web/src/components/usage/UsagePage.tsx	The header gains the usage-header container. The top-bar layout and controls use container-query breakpoints. The date label appears at a wider container breakpoint. The desktop and compact control wrappers no longer use min-w-0.

Priority: ⬇️ Low

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

Change: Bug fix · Severity of issue fixed: Low

Suggested labels: size:S

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 37a7b

The layout-only Usage header change is mergeable after normal checks.

Pre-merge checks: 3 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Description check		The description covers the problem, change, and verification in detail, and it references issue #24113. However, it does not include the explicit maintainer approval of direction and scope required by…	Add a link to the triaged issue or discussion and include the maintainer’s explicit approval comment. Alternatively, explain why this is a very small, focused fix of an obvious bug that qualifies without prior approval.

Passed checks: 3 passed

Check name	Status	Explanation
Title check		The title names the fix and its target: Usage header controls sized to the available width. It is a conventional commit title in the repository's style, and it matches the raw summary, which switches …
Linked Issues check		Issue #24113 requires the Usage header to avoid overlap when the sidebar narrows the main area. UsagePage.tsx now defines @container/usage-header on WorkspacePageHeader and uses the header conta…
Out of Scope Changes check		The diff changes only apps/web/src/components/usage/UsagePage.tsx. It adjusts Usage header layout classes and adds the Usage header container. No shared header, other page, provider, server, mobile,…

Full details: Title check

Explanation

The title names the fix and its target: Usage header controls sized to the available width. It is a conventional commit title in the repository's style, and it matches the raw summary, which switches the header controls and date label from viewport breakpoints to container-query breakpoints. It does not name the overlap with the breadcrumb, but it covers the main change.

Full details: Linked Issues check

Explanation

Issue #24113 requires the Usage header to avoid overlap when the sidebar narrows the main area. UsagePage.tsx now defines @container/usage-header on WorkspacePageHeader and uses the header container for the full/compact control breakpoint. The compact controls are active below @4xl/usage-header, and the control wrapper uses shrink-0. The date label also uses a header-container breakpoint. These changes support compact controls before the controls overlap the breadcrumb. The reported changed-code checks passed.

Full details: Out of Scope Changes check

Explanation

The diff changes only apps/web/src/components/usage/UsagePage.tsx. It adjusts Usage header layout classes and adds the Usage header container. No shared header, other page, provider, server, mobile, or documentation changes are present.

Full details: Description check

Explanation

The description covers the problem, change, and verification in detail, and it references issue #24113. However, it does not include the explicit maintainer approval of direction and scope required by the template, or explain why this focused fix qualifies without that approval.

Resolution

Add a link to the triaged issue or discussion and include the maintainer’s explicit approval comment. Alternatively, explain why this is a very small, focused fix of an obvious bug that qualifies without prior approval.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

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

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

[juliusmarminge]

Reusing this earlier fix for #24113; closed duplicate #24125. Compared both diffs: the same named-container breakpoints and full-control shrink protection are present here. Our independent web reproduction at 1280×800 with a 640px main pane confirmed the fix; evidence and audit limitations are preserved on the duplicate. Those captures use our equivalent product revision, not this head. Electron remains unverified. All 29 checks pass on this head, with no actionable CodeRabbit or Macroscope findings.