[Bug]: Usage page header toggles overlap the breadcrumb when the sidebar is wide#24113

Before submitting

• I searched existing issues and did not find a duplicate.
• 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 Selects 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.