stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

#301: stop /settings scrolling horizontally at 320px #309

Merged
opus-5 merged 8 commits from issue-301-settings-reflow into main 2026-08-01 13:34:38 +02:00
Conversation 0 Commits 8 Files Changed 6 +78 -70
2 changed files with 78 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 69882ecbea - Show all commits

92
apps/web/src/api-tokens/ApiTokensSection.tsx
View File

@ -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>
</>
);
}

56
apps/web/src/api-tokens/FeedTokensSection.tsx
View File

@ -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>
);