Skip to content

fix(web): Limits account labels stay readable with five or more accounts #36137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
craigcossairt wants to merge 3 commits into
base: main
Choose a base branch
from
+13 −7
Open

fix(web): Limits account labels stay readable with five or more accounts #36137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f305ca3
fix(web): Limits account labels stay readable with five or more accounts
craigcossairt Nov 13, 2026
9befde8
Merge origin/main into fix/limits-account-labels
juliusmarminge Nov 13, 2026
88984bb
fix(web): keep Limits at its existing page width
juliusmarminge Nov 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions apps/web/src/components/usage/UsageLimitsPooled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ function SegmentTriggers({
type="button"
style={{ gridColumn: index, gridRow: 1, ...paceMark?.gappedTrack }}
aria-label={`${account.displayName ?? (account.email ? accountInitials(account.email) : account.driver)}: ${remaining}% left${resetsIn ? `, ${resetsIn}` : ""}${timeLeft === null ? "" : `, ${timeLeft}% of the window left`}${credits ? `, ${credits} reset ${credits === 1 ? "credit" : "credits"} banked` : ""}`}
className="relative h-5 min-w-0 cursor-pointer rounded-md bg-muted text-start outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[popup-open]:ring-1 data-[popup-open]:ring-inset data-[popup-open]:ring-border @2xl/pool:h-8"
className="relative h-5 min-w-0 cursor-pointer rounded-md bg-muted text-start outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[popup-open]:ring-1 data-[popup-open]:ring-inset data-[popup-open]:ring-border @min-[11rem]/pool:h-8"
/>
}
>
Expand Down Expand Up @@ -395,11 +395,11 @@ function SegmentTriggers({
) : null}
<span
aria-hidden
className="absolute inset-0 flex items-center justify-center overflow-hidden rounded-md text-3xs leading-none font-semibold text-foreground/80 tabular-nums @2xl/pool:hidden"
className="absolute inset-0 flex items-center justify-center overflow-hidden rounded-md text-3xs leading-none font-semibold text-foreground/80 tabular-nums @min-[11rem]/pool:hidden"
>
{index}
</span>
<div className="relative hidden h-full min-w-0 items-center gap-1.5 overflow-hidden rounded-md px-2 text-xs @2xl/pool:flex">
<div className="relative hidden h-full min-w-0 items-center gap-1.5 overflow-hidden rounded-md px-2 text-xs @min-[11rem]/pool:flex">
{showAccountName ? (
<AccountName
account={account}
Expand Down Expand Up @@ -459,7 +459,7 @@ function LegendRow({
payload={payload}
style={{ gridColumn: "1 / -1", gridRow: index + 1 }}
render={<Button variant="ghost" size="compact" />}
className="min-w-0 @2xl/pool:hidden"
className="min-w-0 @min-[11rem]/pool:hidden"
>
<span className="relative inline-flex size-4 shrink-0 items-center justify-center rounded-sm text-3xs leading-none font-semibold text-foreground/80 tabular-nums">
<span
Expand Down Expand Up @@ -504,11 +504,17 @@ function PoolBar({
readonly now: number;
}) {
const restores = new Map(pool.resets.map((reset) => [reset.member.account.key, reset]));
// The container is one account's share of the bar, so its query asks whether a segment has
// room for its label. The floor keeps the 42rem bar breakpoint for up to three accounts.
const share = Math.max(pool.columns.length, 42 / 11);
return (
<div className="@container/pool min-w-0">
<div className="@container/pool min-w-0" style={{ width: `${100 / share}%` }}>
<div
className="grid gap-x-1 gap-y-1"
style={{ gridTemplateColumns: `repeat(${pool.columns.length}, minmax(0, 1fr))` }}
style={{
width: `${100 * share}%`,
gridTemplateColumns: `repeat(${pool.columns.length}, minmax(0, 1fr))`,
}}
>
{pool.columns.map((member, position) =>
member.window ? (
Expand Down
2 changes: 1 addition & 1 deletion docs/user/usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ part of a segment is what that reset restores. Tap a segment or account row for
where it is signed in, and its reset time. On web, you can hover too. Codex and Claude accounts
with banked reset credits show a ticket count and the **Use reset** action in the account details.
Claude resets are not available when the server runs on macOS, where Claude keeps its login in the
Keychain. On narrow screens, numbered rows below
Keychain. When a bar is too narrow to label every account, numbered rows below
the bar show each account's quota, countdown, and credits. Tap a row to open its details.

The same account signed in on more than one environment, or reported by a hub as well, counts once.
Expand Down
Loading