#301: the token tables need the same scroll wrapper

The sorted report finally named it: `table.api-tokens__table` at 833px
wide, with its `.visually-hidden` heading reaching right=737 — exactly
the document's scrollWidth. Same mechanism as the sessions table, a
second table I had not wrapped.

Locally the API-tokens table was empty and therefore narrow, which is why
this only ever appeared in CI. With a token present it reproduces:
without the wrapper 345px of page overflow, with it none.

The feed-token table gets the same treatment — it is built the same way
and would fail as soon as someone holds a feed token with a long name.

The "[in fitting scroller]" marker in the report is misleading for these:
`main.main` is a scroller, but it is `position: static`, so it never
clipped the absolutely positioned heading. Only a positioned ancestor
does — which is what `.table-scroll` now is.

Verified locally against a real stack, with a wide token table present:
reflow guard green, whole a11y pack green in both colour schemes.
This commit is contained in:
Claude Opus 5 2026-08-01 11:34:13 +02:00 committed by Claude Fable 5
parent 2422f3a28f
commit 69882ecbea
2 changed files with 78 additions and 70 deletions

View File

@ -172,6 +172,7 @@ function TokenList({ tokens }: { tokens: ApiTokenView[] }): React.JSX.Element {
return ( return (
<> <>
<FormError error={error} /> <FormError error={error} />
<div className="table-scroll" tabIndex={0} role="region" aria-label={t('section.title')}>
<table className="table api-tokens__table"> <table className="table api-tokens__table">
<thead> <thead>
<tr> <tr>
@ -218,6 +219,7 @@ function TokenList({ tokens }: { tokens: ApiTokenView[] }): React.JSX.Element {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
</> </>
); );
} }

View File

@ -85,6 +85,7 @@ export function FeedTokensSection(): React.JSX.Element {
)} )}
{tokens.data && tokens.data.length === 0 && <p>{t('feed.empty')}</p>} {tokens.data && tokens.data.length === 0 && <p>{t('feed.empty')}</p>}
{tokens.data && tokens.data.length > 0 && ( {tokens.data && tokens.data.length > 0 && (
<div className="table-scroll" tabIndex={0} role="region" aria-label={t('feed.title')}>
<table className="table"> <table className="table">
<thead> <thead>
<tr> <tr>
@ -103,7 +104,11 @@ export function FeedTokensSection(): React.JSX.Element {
<td>{formatTime(token.createdAt)}</td> <td>{formatTime(token.createdAt)}</td>
<td>{token.lastUsedAt ? formatTime(token.lastUsedAt) : '—'}</td> <td>{token.lastUsedAt ? formatTime(token.lastUsedAt) : '—'}</td>
<td> <td>
<button type="button" className="linklike" onClick={() => void remove(token.id)}> <button
type="button"
className="linklike"
onClick={() => void remove(token.id)}
>
{t('feed.delete')} {t('feed.delete')}
</button> </button>
</td> </td>
@ -111,6 +116,7 @@ export function FeedTokensSection(): React.JSX.Element {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
)} )}
</section> </section>
); );