From 8dcd96c98327ecd4cba5b8668e6e3ab9d8930701 Mon Sep 17 00:00:00 2001
From: extoci <hi@extoci.lol>
Date: Sat, 7 Nov 2026 16:37:50 +0000
Subject: [PATCH] fix(web): keep usage account labels visible at wide sizes

---
 .../src/components/usage/UsageLimitsPooled.tsx  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx
index 00f437246584f..c0a17be4e8061 100644
--- a/apps/web/src/components/usage/UsageLimitsPooled.tsx
+++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx
@@ -288,7 +288,7 @@ function PoolSegment({
   readonly color: string;
   readonly now: number;
   readonly index: number;
-  readonly showAccountName: boolean;
+  readonly showPercentage: boolean;
 }) {
   return account.redeem ? (
     <RedeemableSegment account={account} redeemAt={account.redeem} {...props} />
@@ -333,13 +333,13 @@ function SegmentTriggers({
   color,
   now,
   index,
-  showAccountName,
+  showPercentage,
 }: SegmentPayload & {
   readonly refillPercent: number;
   readonly color: string;
   readonly now: number;
   readonly index: number;
-  readonly showAccountName: boolean;
+  readonly showPercentage: boolean;
 }) {
   const popover = use(SegmentPopoverContext) ?? undefined;
   const payload: SegmentPayload = { account, window, reset, redeem };
@@ -398,14 +398,9 @@ function SegmentTriggers({
           {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">
-          {showAccountName ? (
-            <AccountName
-              account={account}
-              className="min-w-0 truncate font-medium text-foreground"
-            />
-          ) : null}
+          <AccountName account={account} className="min-w-0 truncate font-medium text-foreground" />
           {/* A single-account bar repeats the headline percentage. */}
-          {showAccountName ? (
+          {showPercentage ? (
             <span className="shrink-0 font-semibold text-foreground tabular-nums">
               {remaining}%
             </span>
@@ -519,7 +514,7 @@ function PoolBar({
               color={normalizeProviderAccentColor(member.account.accentColor) ?? color}
               now={now}
               index={position + 1}
-              showAccountName={pool.columns.length > 1}
+              showPercentage={pool.columns.length > 1}
             />
           ) : null,
         )}