fix(keys): show desktop quota amounts side by side

Place remaining quota on the left and used quota on the right above the progress bar, without visible labels in desktop rows. Preserve accessible descriptions and the existing mobile labels and stacked layout.

Validation: updated regressions failed before the change and all 26 API key listing tests passed afterward. TypeScript, scoped lint, formatting, production build, and git diff checks passed.

web/src/features/keys/components/__tests__/api-key-listing.test.tsx

@@ -151,7 +151,7 @@ afterEach(() => {
     .setConfig({ currency: { ...DEFAULT_CURRENCY_CONFIG } })
 })
 
-it('shows remaining and used amounts above a progress bar, with the currency only in the header', () => {
+it('shows desktop remaining and used amounts side by side without labels, with the currency only in the header', () => {
   renderQuota()
   expect(
     screen.getByRole('columnheader', { name: 'Quota ($)' })
@@ -159,7 +159,13 @@ it('shows remaining and used amounts above a progress bar, with the currency onl
   const trigger = screen.getByRole('button', {
     name: /Remaining 80; Remaining percentage 40%; Used amount 120/,
   })
-  expect(trigger).toHaveTextContent('Remaining80Used amount120')
+  expect(trigger).toHaveTextContent('80120')
+  expect(trigger).not.toHaveTextContent(/Remaining|Used amount/)
+  expect(
+    trigger.querySelector('[data-slot="api-key-quota-values"]')
+  ).toHaveClass('grid-cols-2')
+  expect(within(trigger).getByText('80')).toHaveClass('text-left')
+  expect(within(trigger).getByText('120')).toHaveClass('text-right')
   expect(trigger).not.toHaveTextContent('$')
   expect(trigger.querySelector('svg')).toBeNull()
   expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '40')
@@ -193,7 +199,9 @@ it('shows unlimited with cumulative usage and explains it on demand', async () =
   renderQuota({ ...key, unlimited_quota: true })
   const button = screen.getByRole('button', { name: /Unlimited/ })
   expect(button).toHaveTextContent('Unlimited')
-  expect(button).toHaveTextContent('RemainingUnlimitedUsed amount120')
+  expect(button).toHaveTextContent('Unlimited120')
+  expect(button).not.toHaveTextContent(/Remaining|Used amount/)
+  expect(within(button).getByText('Unlimited')).toHaveClass('text-left')
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
   await userEvent.click(button)
   const detail = await screen.findByRole('dialog')
@@ -486,6 +494,7 @@ it('keeps mobile quota readable and opens complete model and IP restrictions by
   const quota = screen.getByRole('button', {
     name: /Unlimited; Used amount 4,490.16/,
   })
+  expect(quota).toHaveTextContent('Remaining($)UnlimitedUsed amount4,490.16')
   expect(quota.querySelector('[data-slot="api-key-quota-values"]')).toHaveClass(
     'grid-cols-[auto_minmax(0,1fr)]'
   )

web/src/features/keys/components/api-key-quota-cell.tsx

@@ -104,20 +104,25 @@ export function ApiKeyQuotaCell(props: ApiKeyQuotaCellProps) {
         >
           <span
             data-slot='api-key-quota-values'
-            className='grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-2 gap-y-1 text-xs'
+            className={cn(
+              'grid w-full min-w-0 items-baseline gap-x-2 gap-y-1 text-xs',
+              props.variant === 'card'
+                ? 'grid-cols-[auto_minmax(0,1fr)]'
+                : 'grid-cols-2'
+            )}
           >
-            <span className='text-muted-foreground'>
-              {t('Remaining')}
-              {props.variant === 'card' && (
+            {props.variant === 'card' && (
+              <span className='text-muted-foreground'>
+                {t('Remaining')}
                 <span className='ml-1'>({quotaUnit})</span>
-              )}
-            </span>
+              </span>
+            )}
             <span
               className={cn(
-                'min-w-0 truncate text-right',
+                'min-w-0 truncate',
                 props.variant === 'card'
-                  ? 'text-sm leading-5 font-normal'
-                  : 'font-medium',
+                  ? 'text-right text-sm leading-5 font-normal'
+                  : 'text-left font-medium',
                 !props.apiKey.unlimited_quota && 'font-mono tabular-nums',
                 !props.apiKey.unlimited_quota &&
                   remaining < 0 &&
@@ -131,7 +136,9 @@ export function ApiKeyQuotaCell(props: ApiKeyQuotaCellProps) {
                 ? t('Unlimited')
                 : formattedRemaining}
             </span>
-            <span className='text-muted-foreground'>{t('Used amount')}</span>
+            {props.variant === 'card' && (
+              <span className='text-muted-foreground'>{t('Used amount')}</span>
+            )}
             <span
               className={cn(
                 'text-muted-foreground min-w-0 truncate text-right font-mono tabular-nums',