From f305ca327459c6064ab29389de97b63476598172 Mon Sep 17 00:00:00 2001
From: craigcossairt <262273915+craigcossairt@users.noreply.github.com>
Date: Fri, 13 Nov 2026 04:08:56 -0700
Subject: [PATCH 1/2] fix(web): Limits account labels stay readable with five
 or more accounts

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>
---
 .../src/components/WorkspacePageContainer.tsx  |  3 ++-
 .../src/components/usage/UsageLimitsPooled.tsx | 18 ++++++++++++------
 apps/web/src/components/usage/UsagePage.tsx    |  2 +-
 docs/user/usage.md                             |  2 +-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/WorkspacePageContainer.tsx b/apps/web/src/components/WorkspacePageContainer.tsx
index acfb38e61a2c0..45eab14ea7c74 100644
--- a/apps/web/src/components/WorkspacePageContainer.tsx
+++ b/apps/web/src/components/WorkspacePageContainer.tsx
@@ -2,12 +2,13 @@ import type { ComponentPropsWithoutRef } from "react";
 
 import { cn } from "../lib/utils";
 
-export type WorkspacePageWidth = "readable" | "wide" | "expanded";
+export type WorkspacePageWidth = "readable" | "wide" | "expanded" | "full";
 
 const WIDTH_CLASS: Record<WorkspacePageWidth, string> = {
   readable: "max-w-4xl",
   wide: "max-w-5xl",
   expanded: "max-w-6xl",
+  full: "max-w-none",
 };
 
 export function WorkspacePageContainer({
diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx
index d5f46398fa31c..03c2d7d388583 100644
--- a/apps/web/src/components/usage/UsageLimitsPooled.tsx
+++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx
@@ -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"
           />
         }
       >
@@ -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}
@@ -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
@@ -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 ? (
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 8bc8a93a43d69..06b1add512370 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -509,7 +509,7 @@ export function UsagePage() {
         </header>
 
         <ScrollArea className="min-h-0 flex-1">
-          <WorkspacePageContainer width="wide">
+          <WorkspacePageContainer width={showingLimits ? "full" : "wide"}>
             {selectedEnvironments.length === 0 ? (
               <p className="text-sm text-muted-foreground">
                 {environments.length === 0
diff --git a/docs/user/usage.md b/docs/user/usage.md
index e6b3a46d5a14e..ce55207f87137 100644
--- a/docs/user/usage.md
+++ b/docs/user/usage.md
@@ -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.

From 88984bb3d8fac5482d23238e7cee65b1dd28c858 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Fri, 13 Nov 2026 11:25:05 +0000
Subject: [PATCH 2/2] fix(web): keep Limits at its existing page width

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>
---
 apps/web/src/components/WorkspacePageContainer.tsx | 3 +--
 apps/web/src/components/usage/UsagePage.tsx        | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/WorkspacePageContainer.tsx b/apps/web/src/components/WorkspacePageContainer.tsx
index 45eab14ea7c74..acfb38e61a2c0 100644
--- a/apps/web/src/components/WorkspacePageContainer.tsx
+++ b/apps/web/src/components/WorkspacePageContainer.tsx
@@ -2,13 +2,12 @@ import type { ComponentPropsWithoutRef } from "react";
 
 import { cn } from "../lib/utils";
 
-export type WorkspacePageWidth = "readable" | "wide" | "expanded" | "full";
+export type WorkspacePageWidth = "readable" | "wide" | "expanded";
 
 const WIDTH_CLASS: Record<WorkspacePageWidth, string> = {
   readable: "max-w-4xl",
   wide: "max-w-5xl",
   expanded: "max-w-6xl",
-  full: "max-w-none",
 };
 
 export function WorkspacePageContainer({
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 06b1add512370..8bc8a93a43d69 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -509,7 +509,7 @@ export function UsagePage() {
         </header>
 
         <ScrollArea className="min-h-0 flex-1">
-          <WorkspacePageContainer width={showingLimits ? "full" : "wide"}>
+          <WorkspacePageContainer width="wide">
             {selectedEnvironments.length === 0 ? (
               <p className="text-sm text-muted-foreground">
                 {environments.length === 0