mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André BombeckandClaude Opus 4.7
dd8212e202
Marc has now reported a residual scrollbar on `/admin/api-tokens` four times running. Earlier fixes addressed the obvious overflow culprits (column-hide in v1.4.15, mobile card-list in v1.4.16, admin-shell mobile-strip `no-scrollbar` in v1.4.18), but the section itself still leaked a few quirks: - The mobile token-name span carried `truncate` and `break-all` on the same element. `truncate` sets `white-space: nowrap`, which beats `word-break: break-all` per CSS spec — `break-all` was dead code AND it was misleading. Remove it. - The desktop table had no per-column upper bound. A long token name could expand the row past the card on 768-1024 px viewports. Lock the layout with `table-fixed` + `<colgroup>` widths. - Permission badges had no `max-width` cap. A single long permission string (`measurements:write:audit:legacy:extended`) could push the cell past the card. Cap each badge with `max-w-full truncate` and a native `title` attribute. Wrap every potentially-long string (token name, username, permission badge) in a small `<TruncatedCell>` helper that pairs the visual truncation with a radix tooltip. The tooltip is the discoverable hover/long-press path so the full value is still readable; the native `title` attribute is a graceful fallback for screen readers and right-click → "view full name" on desktop. Adds an e2e regression that walks every element inside the mobile card-list and asserts none of them carry `scrollWidth > clientWidth`, exercised against a worst-case payload (long token name + long username + long permission string). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>