Commit 950644c9 by CaIon

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.
parent bd22e45a
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment