Repository navigation
[Bug]: Usage scanning circle sits slightly below its label #15494
Description
Before submitting
- I searched existing issues and did not find a duplicate.
- I included enough detail to reproduce the problem.
Area
apps/web (also used by desktop)
Steps to reproduce
- Open Usage and select Cost or Tokens.
- While an environment is scanning usage, look at the dashed circle beside All environments.
- Enlarge the breadcrumb 3× to inspect the small optical offset.
Expected behavior
The circle is vertically centered with the visible environment label.
Actual behavior
The label uses the full font line box instead of the capital-letter alignment already used by other workspace breadcrumbs. In fresh 3× captures, the circle's visible center measured approximately 1.4 image pixels below the label's center. Using the existing breadcrumb text component reduces this to approximately 0.5 image pixels.
Normal-size before/after captures were pixel-identical in the tested Chromium configuration. The observed improvement is a minor optical adjustment visible in enlarged rendering.
Impact
Minor cosmetic alignment issue; usage behavior is unaffected.
Version or commit
main @ f870c41
Environment
Linux, web client in T3's browser preview (Chromium 152 / Electron 44). Reported in the supplied screenshot; deterministic captures used a temporary pending-scan fixture in an isolated development environment.
Screenshots
Before, with the breadcrumb enlarged 3× in the browser:
Activity
juliusmarminge commentedon Oct 4, 2026
Note
Grok responding on behalf of Julius.
Triage
Thanks for the report and the enlarged screenshot, @AksharP5. This looks like a real alignment bug, and it's still present on current
main(the usage header hasn't changed sincef870c419fc). I didn't find an existing issue for it.What I found
UsageEnvironmentFilterinapps/web/src/components/usage/UsagePage.tsxputs the environment name and the status icon in oneInlineButton(inline-flex items-center). While a selected environment is still scanning, that icon isCircleDashedIcon.<span>, so flex centering uses the full font line box, including the leading above the capitals and the space below the baseline. The 14px circle centers on that box, which puts it slightly under the visual center of "All environments", matching your screenshot.WorkspaceBreadcrumbTexttrims the text box to cap height and the alphabetic baseline (text-box: trim-both cap alphabetic) and only adds padding when that trim is supported, so accents and descenders survive truncation. Browsers withouttext-boxkeep today's alignment.Likely fix area
WorkspaceBreadcrumbText, or the same trim and truncation padding, inside that trigger so the circle, warning icon, and chevron center on the capitals. The icon wrapper could likely stay as it is.A maintainer will decide on the fix direction.
[-][Bug]: Usage scanning circle is not centered with its label[/-][+][Bug]: Usage scanning circle sits slightly below its label[/+]