mirror of
https://gh-proxy.org/https://github.com/klinsmaya/new-api.git
synced 2026-11-10 10:27:56 +08:00
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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user