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.
This commit is contained in:
CaIon
2026-09-08 19:59:27 +08:00
parent bd22e45a74
commit 950644c9d5
3 changed files with 10 additions and 9 deletions
@@ -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)]'
)
@@ -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
@@ -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,