fix(auth-files): prevent long quota labels from overlapping adjacent columns

Fixes #345
This commit is contained in:
lzt404 committed 2026-10-05 16:10:37 +08:00
1 parent 7c3008dd81
commit 9f451f8299
3 files changed
+37

No files matched your search

+3
View File
@@ -14,6 +14,9 @@
}
.credential-quota-compact .credential-quota-row {
/* Long labels must shrink within their quota window, not widen the
implicit grid track into the next window or the action column. */
grid-template-columns: minmax(0, 1fr);
align-content: start;
gap: 5px;
}
+25
View File
@@ -182,6 +182,31 @@ const fs = require('node:fs/promises');
assert.deepEqual(await page.evaluate(() => window.authFileListFixture.requests.find(request => request.method === 'DELETE')?.query), { name: '12-account.json' });
assert.deepEqual(await page.evaluate(() => window.authFileListFixture.unhandled), []);
// Issue #345: long Antigravity labels/details must not size implicit grid
// tracks beyond the quota cell or cover the adjacent action buttons.
for (const theme of ['light', 'dark']) {
for (const width of [1800, 1505, 1280, 1172, 1024, 390]) {
await page.setViewportSize({ width, height: 1000 });
await open(`theme=${theme}&locale=en&longQuota=1`);
for (const expanded of [false, true]) {
if (expanded) await card(1).locator('.credential-quota-more > summary').click();
const overflow = await card(1).locator('.auth-list-quota').evaluate(cell => {
const bounds = cell.getBoundingClientRect();
return [...cell.querySelectorAll('.credential-quota-rows, .credential-quota-row, .credential-quota-label, .credential-quota-label strong, .credential-quota-track, small')]
.filter(node => node.getClientRects().length)
.filter(node => {
const rect = node.getBoundingClientRect();
const row = node.closest('.credential-quota-row')?.getBoundingClientRect() || bounds;
return rect.left < row.left - 1 || rect.right > row.right + 1 || rect.right > bounds.right + 1;
}).map(node => node.className || node.tagName);
});
assert.deepEqual(overflow, [], `${theme} ${width} expanded=${expanded}: quota content stays inside its row and column`);
await assertFits(`long quota ${theme} ${width}`);
}
await page.screenshot({ path: path.join(screenshotDir, `long-quota-${theme}-${width}.png`), fullPage: true });
}
}
const cases = ['light', 'dark'].flatMap(theme => [1800, 1280, 1024, 390].flatMap(width => ['zh-CN', 'en'].map(locale => ({ theme, width, locale }))));
for (const { theme, width, locale } of cases) {
await page.setViewportSize({ width, height: 1000 });
+9
View File
@@ -18,6 +18,7 @@ const files: Record<string, unknown>[] = Array.from({ length: smallList ? 3 : 12
name: `${String(index + 1).padStart(2, '0')}-account.json`,
email: index === 0 ? 'long-fictional-account-for-layout@example.test' : `account-${index + 1}@example.test`,
auth_index: `fixture-account-${index + 1}`, provider: smallList ? ['codex', 'devin', 'xai'][index] : index === 3 ? 'claude' : index === 4 ? 'xai' : 'codex',
...(params.has('longQuota') ? { provider: 'antigravity' } : {}),
source: 'file', size: 1800 + index * 350, updated_at: '2026-10-01T00:00:00Z',
disabled: smallList ? index !== 1 : index === 2 || index === 6,
status: (smallList ? index !== 1 : index === 2 || index === 6) ? 'disabled' : 'active',
@@ -50,6 +51,14 @@ updateQuotaCache(Object.fromEntries(files.map((file, index) => {
] : []),
],
};
if (params.has('longQuota')) {
quota.rows = Array.from({ length: 4 }, (_, row) => ({
label: `${row < 2 ? 'Gemini' : 'Claude'} Models · ${row % 2 ? 'Weekly' : 'Five Hour'} Limit Remaining`,
remainingPercent: row % 2 ? 100 : 75,
resetAtMs: startedAt + 3 * 3600000,
detail: 'You have used some of your five-hour limit, it will fully reset at the time shown above.',
}));
}
return [quotaKey(file), quota];
})));