From 69882ecbea7ebd6d6f996f522720ca0415d64598 Mon Sep 17 00:00:00 2001
From: Claude Opus 5 <opus-5@waidele.info>
Date: Sat, 1 Aug 2026 11:34:13 +0200
Subject: [PATCH] #301: the token tables need the same scroll wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 apps/web/src/api-tokens/ApiTokensSection.tsx  | 92 ++++++++++---------
 apps/web/src/api-tokens/FeedTokensSection.tsx | 56 ++++++-----
 2 files changed, 78 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/api-tokens/ApiTokensSection.tsx b/apps/web/src/api-tokens/ApiTokensSection.tsx
index 22d0a9d..2b34627 100644
--- a/apps/web/src/api-tokens/ApiTokensSection.tsx
+++ b/apps/web/src/api-tokens/ApiTokensSection.tsx
@@ -172,52 +172,54 @@ function TokenList({ tokens }: { tokens: ApiTokenView[] }): React.JSX.Element {
   return (
     <>
       <FormError error={error} />
-      <table className="table api-tokens__table">
-        <thead>
-          <tr>
-            <th>{t('fields.name')}</th>
-            <th>{t('fields.scope')}</th>
-            <th>{t('fields.ponds')}</th>
-            <th>{t('list.created')}</th>
-            <th>{t('list.lastUsed')}</th>
-            <th>{t('list.expires')}</th>
-            <th>{t('list.status')}</th>
-            <th>
-              <span className="visually-hidden">{t('common:tableActions')}</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {tokens.map((token) => (
-            <tr key={token.id}>
-              <td>{token.name}</td>
-              <td>{token.scope === 'write' ? t('fields.scopeWrite') : t('fields.scopeRead')}</td>
-              <td>
-                {token.ponds.length === 0
-                  ? t('list.allPonds')
-                  : token.ponds.map((pond) => pond.name).join(', ')}
-              </td>
-              <td>{new Date(token.createdAt).toLocaleDateString()}</td>
-              <td>
-                {token.lastUsedAt ? new Date(token.lastUsedAt).toLocaleString() : t('list.never')}
-              </td>
-              <td>{token.expiresAt ? new Date(token.expiresAt).toLocaleDateString() : '—'}</td>
-              <td>{t(`list.${statusOf(token)}`)}</td>
-              <td>
-                {!token.revokedAt && (
-                  <button
-                    type="button"
-                    className="button api-tokens__revoke"
-                    onClick={() => void revoke(token.id)}
-                  >
-                    {t('list.revoke')}
-                  </button>
-                )}
-              </td>
+      <div className="table-scroll" tabIndex={0} role="region" aria-label={t('section.title')}>
+        <table className="table api-tokens__table">
+          <thead>
+            <tr>
+              <th>{t('fields.name')}</th>
+              <th>{t('fields.scope')}</th>
+              <th>{t('fields.ponds')}</th>
+              <th>{t('list.created')}</th>
+              <th>{t('list.lastUsed')}</th>
+              <th>{t('list.expires')}</th>
+              <th>{t('list.status')}</th>
+              <th>
+                <span className="visually-hidden">{t('common:tableActions')}</span>
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {tokens.map((token) => (
+              <tr key={token.id}>
+                <td>{token.name}</td>
+                <td>{token.scope === 'write' ? t('fields.scopeWrite') : t('fields.scopeRead')}</td>
+                <td>
+                  {token.ponds.length === 0
+                    ? t('list.allPonds')
+                    : token.ponds.map((pond) => pond.name).join(', ')}
+                </td>
+                <td>{new Date(token.createdAt).toLocaleDateString()}</td>
+                <td>
+                  {token.lastUsedAt ? new Date(token.lastUsedAt).toLocaleString() : t('list.never')}
+                </td>
+                <td>{token.expiresAt ? new Date(token.expiresAt).toLocaleDateString() : '—'}</td>
+                <td>{t(`list.${statusOf(token)}`)}</td>
+                <td>
+                  {!token.revokedAt && (
+                    <button
+                      type="button"
+                      className="button api-tokens__revoke"
+                      onClick={() => void revoke(token.id)}
+                    >
+                      {t('list.revoke')}
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </>
   );
 }
diff --git a/apps/web/src/api-tokens/FeedTokensSection.tsx b/apps/web/src/api-tokens/FeedTokensSection.tsx
index 1b2e40d..bf3a1a5 100644
--- a/apps/web/src/api-tokens/FeedTokensSection.tsx
+++ b/apps/web/src/api-tokens/FeedTokensSection.tsx
@@ -85,32 +85,38 @@ export function FeedTokensSection(): React.JSX.Element {
       )}
       {tokens.data && tokens.data.length === 0 && <p>{t('feed.empty')}</p>}
       {tokens.data && tokens.data.length > 0 && (
-        <table className="table">
-          <thead>
-            <tr>
-              <th>{t('fields.name')}</th>
-              <th>{t('list.created')}</th>
-              <th>{t('list.lastUsed')}</th>
-              <th>
-                <span className="visually-hidden">{t('common:tableActions')}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {tokens.data.map((token) => (
-              <tr key={token.id}>
-                <td>{token.name}</td>
-                <td>{formatTime(token.createdAt)}</td>
-                <td>{token.lastUsedAt ? formatTime(token.lastUsedAt) : '—'}</td>
-                <td>
-                  <button type="button" className="linklike" onClick={() => void remove(token.id)}>
-                    {t('feed.delete')}
-                  </button>
-                </td>
+        <div className="table-scroll" tabIndex={0} role="region" aria-label={t('feed.title')}>
+          <table className="table">
+            <thead>
+              <tr>
+                <th>{t('fields.name')}</th>
+                <th>{t('list.created')}</th>
+                <th>{t('list.lastUsed')}</th>
+                <th>
+                  <span className="visually-hidden">{t('common:tableActions')}</span>
+                </th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {tokens.data.map((token) => (
+                <tr key={token.id}>
+                  <td>{token.name}</td>
+                  <td>{formatTime(token.createdAt)}</td>
+                  <td>{token.lastUsedAt ? formatTime(token.lastUsedAt) : '—'}</td>
+                  <td>
+                    <button
+                      type="button"
+                      className="linklike"
+                      onClick={() => void remove(token.id)}
+                    >
+                      {t('feed.delete')}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       )}
     </section>
   );