# \[Bug\]: Usage page header toggles overlap the breadcrumb when the sidebar is wide · Issue \#24113 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/issues/24113)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: completed

Priority: 0

## Description

[Discussion and activity](https://git.cafe/pingdotgg/t3code/issues/24113)

---

### Before submitting

- [x] I searched existing issues and did not find a duplicate.
- [x] I included enough detail to reproduce or investigate the problem.

### Area

apps/web

### Steps to reproduce

1. Use a window at least 1280 px wide (Tailwind `xl`).
2. Open the Usage page.
3. Drag the sidebar wider until the main area gets close to its 640 px minimum, so the header has less than roughly 700 px.

Seen in the desktop app (screenshot below). The exact trigger in step 3 comes from reading the code, not from a separate clean repro.

### Expected behavior

The header switches to the compact metric/period selects, or the breadcrumb truncates, before anything overlaps.

### Actual behavior

The Cost / Tokens / Limits and period toggles overflow to the left and draw on top of the breadcrumb. In the screenshot, "All providers" sits under "Cost":

`Usage / All environ… / All p[Cost] Tokens Limits | Past 24h …`

### Impact

Cosmetic issue

### Version or commit

0.1.2-nightly.20261022.3512; same code on `main` @ eb1510d249

### Environment

Linux desktop AppImage, 2560×1440

### Cause (from the code)

- `apps/web/src/components/usage/UsagePage.tsx` (`topbarContent`) chooses between the segmented toggles and the compact `Select`s with the viewport breakpoint `xl:`. The header width also depends on the sidebar, and the main area can shrink to `THREAD_MAIN_CONTENT_MIN_WIDTH` (640 px). So at ≥1280 px viewport the full toggles render even when the header is too narrow for them.
- The breadcrumb `nav` and the toggle wrapper are both `min-w-0`, so both shrink below their content. The toggle wrapper uses `justify-end`, so its overflow comes out of its start edge, over the breadcrumb.

Possible fix: a container query on the header instead of `xl:`, and/or `shrink-0` on the toggle wrapper so only the breadcrumb truncates.

### Workaround

Make the sidebar narrower or the window wider.