You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(web): Limits account labels stay readable with five or more accounts - #36137
With five accounts on one provider, Usage → Limits cuts off every account name in the bar ("Pe…", "Devel…", "Develo…"), so the segments look the same and each one has to be hovered to identify it. This happens even in a 2560px wide window.
The bar picks its layout per account.PoolBar switched to the labeled layout with @2xl/pool, which looks only at the bar's width. Its container is now sized to one account's share of the bar, so the query asks whether a segment has 11rem for its label. When it does not, the bar falls back to the numbered rows it already uses on narrow screens, which show full names. Bars with up to three accounts keep the old 42rem breakpoint exactly.
Limits uses the modal's width. The Limits list was held to max-w-5xl inside the 80rem modal, so a five-account bar could never reach the width its labels need, however wide the window. WorkspacePageContainer gets a full width that Limits uses. The other Usage views stay on wide.
docs/user/usage.md said the numbered rows appear "on narrow screens"; it now says they appear when a bar is too narrow to label every account.
#32534 edits lines next to these in UsageLimitsPooled.tsx. Whichever lands second needs a small rebase, and I will do it if that is this one.
Verification
I hit this with five Claude accounts on a 2560×1032 window.
To check the fix I rendered the Limits view inside AppRouteModal in Chromium through the repo's browser test harness, on made-up accounts ("Personal", "Developer 1" to "Developer 4"), and captured it on main and on this branch:
2560×1030, five accounts. Before: every name is cut off. After: each segment shows its full name, percentage and reset time. One exception remains: in the Session row, the segment that also shows a banked reset credit shortens "Personal" to "Perso…".
1080×1680, five accounts. Before: every name is cut off. After: the bar is too narrow for five labels, so it shows numbered segments with a row per account below. Each of those cards is about 100px taller as a result.
1600×1000, three accounts. Labeled segments before and after. The list is wider.
1600×1000, four accounts and 700×1000, five accounts. Same layout before and after (labels and numbered rows respectively).
Before
After
2560×1030, five accounts
1080×1680, five accounts
1600×1000, three accounts
vp run check:changed passed format, typecheck, the test beside the change, and the React compiler check. Lint passes on the changed files. Knip could not run in my checkout because the mobile and marketing dependencies are not installed.
No test added: this is a layout bug and the captures are the proof.
Not checked: the packaged desktop app. The screenshots come from the component harness, not a running server. The accounts in them are made up because my real Limits page shows account emails.
Claude Fable 5.2 in Claude Code, run from T3 Code.
The Limits bar chose its labeled layout from the bar's width alone, so a pool
of five accounts got segments too narrow for their names and every name was
cut off. The layout now asks whether one account's share of the bar has room
for a label, and falls back to the numbered rows when it does not. Limits also
uses the full width of the Usage modal, so a wide window labels more accounts.
Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
Macroscope's review found this PR approvable — Limits gains more horizontal space and switches to numbered account legends when individual labels would be cramped. The changes are presentation-only, leaving usage data and limit behavior unchanged.
You can add or adjust custom eligibility rules. Learn more.
WorkspacePageContainer adds a full width option. The Limits page selects it; other metrics remain wide.
Pooled bar labels and sizing apps/web/src/components/usage/UsageLimitsPooled.tsx, docs/user/usage.md
Pooled bar layout switches at the @min-[11rem]/pool threshold. PoolBar sizes account columns based on their count. The documentation describes when numbered account rows appear.
This change widens the Limits page and adjusts pooled-bar labels so account names stay readable. No merge-blocking risk was found, and other Usage views keep their previous width.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title names the main change: Usage → Limits account labels stay readable when a provider has five or more accounts. It uses the conventional commit form with the fix(web) scope, matching the linke…
Description check
The description follows the template closely. It has Problem, Change, Scope, and Verification sections. The Problem section explains the truncated labels with five accounts and includes reproduction c…
Linked Issues check
[#36134] The reported causes are addressed. In apps/web/src/components/usage/UsageLimitsPooled.tsx, PoolBar sets each @container/pool to 100/share% of the bar, where share = max(columns, 42/11). The l…
Out of Scope Changes check
All changes connect to #36134. UsageLimitsPooled.tsx changes the labeled-layout query and the bar sizing that the issue identifies as causes. WorkspacePageContainer.tsx adds the "full" width option, w…
Full details: Title check
Explanation
The title names the main change: Usage → Limits account labels stay readable when a provider has five or more accounts. It uses the conventional commit form with the fix(web) scope, matching the linked bug (#36134) and the layout change in PoolBar and the full-width Limits view. At 72 characters it is slightly long but still clear.
Full details: Description check
Explanation
The description follows the template closely. It has Problem, Change, Scope, and Verification sections. The Problem section explains the truncated labels with five accounts and includes reproduction context (2560px window). The Change section explains both the per-account layout selection in PoolBar and the Limits full-width change, and states why they belong together. Scope links #36134 and explains the bug fix nature and the overlap with #32534. Verification gives specific browser-harness captures for several widths and account counts, lists the checks run, and states what was not checked. Before/after screenshots are embedded as the template requires for UI changes. The agent/model line is present. The Problem section does not state the expected behavior explicitly beyond the implied readable labels, and the Verification section notes the Session-row exception. The description is complete enough to pass.
Full details: Linked Issues check
Explanation
[#36134] The reported causes are addressed. In apps/web/src/components/usage/UsageLimitsPooled.tsx, PoolBar sets each @container/pool to 100/share% of the bar, where share = max(columns, 42/11). The labeled layout now switches on @min-[11rem]/pool instead of @2xl/pool, so a segment shows its label only when it has 11rem. With 5 accounts, labels appear at a bar width of about 55rem. With 3 accounts, the threshold stays at a 42rem bar. When labels do not fit, the existing numbered rows (LegendRow, index badges) show full names. The Limits list is no longer held to max-w-5xl: UsagePage uses the new WorkspacePageContainer width "full" for the limits metric. The PR description reports captures at 2560×1030 (five accounts, labels shown) and 1080×1680 (numbered rows). Remaining limitations: the Session segment that shows a banked reset credit still truncates "Personal" to "Perso…" in the author's capture. This is a residual truncation in one row, but the segments remain distinguishable and the issue's expected behavior is met. No automated test was added. The issue does not request one, and the PR describes the captures as the verification. The 4-account threshold moves from 42rem to 44rem, which the issue does not address explicitly. The packaged desktop app was not checked.
Full details: Out of Scope Changes check
Explanation
All changes connect to #36134. UsageLimitsPooled.tsx changes the labeled-layout query and the bar sizing that the issue identifies as causes. WorkspacePageContainer.tsx adds the "full" width option, which UsagePage.tsx uses only for the limits metric, and the issue names the max-w-5xl constraint as a cause. Other Usage views stay on "wide". docs/user/usage.md changes the numbered-row condition to match the new behavior. The PR description notes that #32534 touches adjacent lines in UsageLimitsPooled.tsx, which is a merge coordination concern and not out-of-scope work.
Finishing Touches
Generate unit tests (beta)
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.
The label clipping is fixed by the per-account breakpoint alone: a bar
too narrow to label every account falls back to the numbered rows, which
show full names. Widening the Limits page is a separate layout change.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
size:S10-29 changed lines (additions + deletions).takeover:needs-juliusTakeover done; route gate says Julius decidesvouch:unvouchedAuthor is not yet trusted in the VOUCHED list.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
juliusmarminge
added
the
takeover:in-progress
Problem
With five accounts on one provider, Usage → Limits cuts off every account name in the bar ("Pe…", "Devel…", "Develo…"), so the segments look the same and each one has to be hovered to identify it. This happens even in a 2560px wide window.
Fixes #36134.
Change
Two parts of the same fix:
PoolBarswitched to the labeled layout with@2xl/pool, which looks only at the bar's width. Its container is now sized to one account's share of the bar, so the query asks whether a segment has 11rem for its label. When it does not, the bar falls back to the numbered rows it already uses on narrow screens, which show full names. Bars with up to three accounts keep the old 42rem breakpoint exactly.max-w-5xlinside the 80rem modal, so a five-account bar could never reach the width its labels need, however wide the window.WorkspacePageContainergets afullwidth that Limits uses. The other Usage views stay onwide.docs/user/usage.mdsaid the numbered rows appear "on narrow screens"; it now says they appear when a bar is too narrow to label every account.Scope
Bug fix. The bug is shown in #36134.
#32534 edits lines next to these in
UsageLimitsPooled.tsx. Whichever lands second needs a small rebase, and I will do it if that is this one.Verification
I hit this with five Claude accounts on a 2560×1032 window.
To check the fix I rendered the Limits view inside
AppRouteModalin Chromium through the repo's browser test harness, on made-up accounts ("Personal", "Developer 1" to "Developer 4"), and captured it onmainand on this branch:vp run check:changedpassed format, typecheck, the test beside the change, and the React compiler check. Lint passes on the changed files. Knip could not run in my checkout because the mobile and marketing dependencies are not installed.No test added: this is a layout bug and the captures are the proof.
Not checked: the packaged desktop app. The screenshots come from the component harness, not a running server. The accounts in them are made up because my real Limits page shows account emails.
Claude Fable 5.2 in Claude Code, run from T3 Code.
🤖 Generated with Claude Code