diff --git a/src/components/admin/__tests__/api-token-overview-responsive.test.tsx b/src/components/admin/__tests__/api-token-overview-responsive.test.tsx index 6e2cb877d..b0f0c47ea 100644 --- a/src/components/admin/__tests__/api-token-overview-responsive.test.tsx +++ b/src/components/admin/__tests__/api-token-overview-responsive.test.tsx @@ -122,6 +122,34 @@ describe("ApiTokenOverviewSection — responsive", () => { expect(html).toMatch(/class="[^"]*\bp-4\b[^"]*sm:p-6/); }); + it("desktop date cells drop whitespace-nowrap (v1.4.22 C2 5th-attempt fix)", () => { + const html = render(); + // The "Last used" + "Created" ``s no longer carry + // `whitespace-nowrap`. The v1.4.19 production probe confirmed that + // class was the actual culprit behind the residual horizontal + // scrollbar at 768-1280px: a formatted date+time string + // ("05.05.2026, 21:46") overflowed its 12% colgroup allotment + // (~84px on a 700px content area) and won over `table-fixed`'s + // width contract, so the table's intrinsic width exceeded 100% + // and the wrapping `overflow-x-auto` painted a scrollbar. Letting + // the cell wrap to two lines costs one row of height but kills + // the bar. + const tableMatch = html.match(//); + expect(tableMatch).not.toBeNull(); + const tableMarkup = tableMatch![0]; + // Pick every inside the desktop table that renders one of the + // two date columns (text-right + text-xs is unique to those cells) + // and assert none carries whitespace-nowrap. + const dateCellMatches = + tableMarkup.match( + /]*\btext-right\b[^>]*\btext-xs\b[^>]*>/g, + ) ?? []; + expect(dateCellMatches.length).toBeGreaterThanOrEqual(2); + for (const cell of dateCellMatches) { + expect(cell).not.toContain("whitespace-nowrap"); + } + }); + it("mobile timestamp lines wrap (no nowrap on the meta paragraphs)", () => { const html = render(); const mobileMatch = html.match(/]*md:hidden[^>]*>([\s\S]*?)<\/ul>/); diff --git a/src/components/admin/api-token-overview-section.tsx b/src/components/admin/api-token-overview-section.tsx index 9efec6d92..c44293cd6 100644 --- a/src/components/admin/api-token-overview-section.tsx +++ b/src/components/admin/api-token-overview-section.tsx @@ -222,12 +222,25 @@ export function ApiTokenOverviewSection() { )} - + {/* v1.4.22 C2 (5th attempt) — drop + `whitespace-nowrap` on the date cells. The + v1.4.19 A7 probe confirmed `formatDateTime` + renders "05.05.2026, 21:46" (~110px) which + exceeds the 12% `` allotment (~84px on + a 700px content area); `whitespace-nowrap` + wins over `table-fixed`'s width contract, + so the table's intrinsic width exceeds 100% + and the wrapper's `overflow-x-auto` paints + the scrollbar the maintainer kept reporting + for the 5th time. Letting the date+time + wrap to two lines on narrow viewports costs + one row of height but eliminates the bar. */} + {token.lastUsedAt ? formatDateTime(token.lastUsedAt) : t("admin.tokenNeverUsed")} - + {formatDate(token.createdAt)}