apps/web/src/api-tokens/ApiTokensSection.tsx

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

apps/web/src/api-tokens/FeedTokensSection.tsx

@@ -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 && (
+        <div className="table-scroll" tabIndex={0} role="region" aria-label={t('feed.title')}>
           <table className="table">
             <thead>
               <tr>
@@ -103,7 +104,11 @@ export function FeedTokensSection(): React.JSX.Element {
                   <td>{formatTime(token.createdAt)}</td>
                   <td>{token.lastUsedAt ? formatTime(token.lastUsedAt) : '—'}</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')}
                     </button>
                   </td>
@@ -111,6 +116,7 @@ export function FeedTokensSection(): React.JSX.Element {
               ))}
             </tbody>
           </table>
+        </div>
       )}
     </section>
   );