From 950644c9d54445bdd8796643e4e2e18e13167a4c Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Tue, 8 Sep 2026 19:59:27 +0800
Subject: [PATCH] fix(keys): preserve spacing after desktop quota content

Bound desktop quota content to 180px so column width provides whitespace before the group column. Remove the quota-only padding override to use the same cell padding as other columns. Preserve the mobile quota layout.

Validation: layout regressions failed before the fix and all 26 API key listing tests passed afterward. TypeScript, scoped lint, formatting, production build, and git diff checks passed.
---
 .../components/__tests__/api-key-listing.test.tsx  | 14 +++++++++-----
 .../keys/components/api-key-quota-cell.tsx         |  2 +-
 .../features/keys/components/api-keys-table.tsx    |  3 ---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/src/features/keys/components/__tests__/api-key-listing.test.tsx b/web/src/features/keys/components/__tests__/api-key-listing.test.tsx
index 8e7f29769..7065ea137 100644
--- a/web/src/features/keys/components/__tests__/api-key-listing.test.tsx
+++ b/web/src/features/keys/components/__tests__/api-key-listing.test.tsx
@@ -166,6 +166,7 @@ it('shows desktop remaining and used amounts side by side without labels, with t
   ).toHaveClass('grid-cols-2')
   expect(within(trigger).getByText('80')).toHaveClass('text-left')
   expect(within(trigger).getByText('120')).toHaveClass('text-right')
+  expect(trigger.parentElement).toHaveClass('max-w-45')
   expect(trigger).not.toHaveTextContent('$')
   expect(trigger.querySelector('svg')).toBeNull()
   expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '40')
@@ -359,11 +360,12 @@ it('combines creation and last use while keeping expiry, models and IP restricti
   ).toBeInTheDocument()
   const timeCell = screen.getByRole('cell', { name: /Created.*Last Used/ })
   expect(within(timeCell).getByText('Last Used')).toBeInTheDocument()
-  expect(
-    screen.getByRole('button', {
-      name: /Remaining 80; Remaining percentage 40%; Used amount 120/,
-    })
-  ).toBeInTheDocument()
+  const quotaHeader = screen.getByRole('columnheader', { name: 'Quota ($)' })
+  const quotaTrigger = screen.getByRole('button', {
+    name: /Remaining 80; Remaining percentage 40%; Used amount 120/,
+  })
+  expect(quotaHeader).not.toHaveClass('pr-8')
+  expect(quotaTrigger.closest('td')).not.toHaveClass('pr-8')
 })
 
 it('restores dates hidden by the old default and preserves unrelated column preferences', async () => {
@@ -495,6 +497,8 @@ it('keeps mobile quota readable and opens complete model and IP restrictions by
     name: /Unlimited; Used amount 4,490.16/,
   })
   expect(quota).toHaveTextContent('Remaining($)UnlimitedUsed amount4,490.16')
+  expect(quota.parentElement).toHaveClass('w-full')
+  expect(quota.parentElement).not.toHaveClass('max-w-45')
   expect(quota.querySelector('[data-slot="api-key-quota-values"]')).toHaveClass(
     'grid-cols-[auto_minmax(0,1fr)]'
   )
diff --git a/web/src/features/keys/components/api-key-quota-cell.tsx b/web/src/features/keys/components/api-key-quota-cell.tsx
index d6f27ca46..295e25984 100644
--- a/web/src/features/keys/components/api-key-quota-cell.tsx
+++ b/web/src/features/keys/components/api-key-quota-cell.tsx
@@ -83,7 +83,7 @@ export function ApiKeyQuotaCell(props: ApiKeyQuotaCellProps) {
       <div
         className={cn(
           'w-full min-w-0',
-          props.variant === 'card' ? 'space-y-2.5' : 'space-y-1.5'
+          props.variant === 'card' ? 'space-y-2.5' : 'max-w-45 space-y-1.5'
         )}
       >
         <PopoverTrigger
diff --git a/web/src/features/keys/components/api-keys-table.tsx b/web/src/features/keys/components/api-keys-table.tsx
index c78bbd3b2..dca195ed1 100644
--- a/web/src/features/keys/components/api-keys-table.tsx
+++ b/web/src/features/keys/components/api-keys-table.tsx
@@ -351,9 +351,6 @@ export function ApiKeysTable() {
       )}
       skeletonKeyPrefix='api-keys-skeleton'
       applyHeaderSize
-      getColumnClassName={(columnId) =>
-        columnId === 'quota' ? 'pr-8' : undefined
-      }
       toolbarProps={{
         searchPlaceholder: t('Filter by name...'),
         searchDebounceMs: 500,