marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(geschichten): widen list meta column so text-sm names fit
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m49s
Details
CI / OCR Service Tests (pull_request) Successful in 24s
Details
CI / Backend Unit Tests (pull_request) Successful in 4m6s
Details
CI / fail2ban Regex (pull_request) Successful in 45s
Details
CI / Semgrep Security Scan (pull_request) Successful in 22s
Details
CI / Compose Bucket Idempotency (pull_request) Successful in 1m8s
Details

Browse Source 
The author column stayed at w-28 after the typography bump, wrapping
names into a cramped two-line stack. w-40 gives name and date one
comfortable line each at the full-width layout.

Refs #802
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 22:55:29 +02:00
parent 50def73d80
commit 0884a1abcd
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/specs/geschichten-reader-journey-spec.html
View File

@@ -424,7 +424,7 @@
<tr><td>Editorial list card</td><td>bg-white shadow-sm border border-brand-sand rounded-sm</td><td>wraps alle Zeilen</td></tr>
<tr class="grp"><td colspan="3">Listenzeile</td></tr>
<tr><td>List row</td><td>flex gap-0 border-b border-brand-sand last:border-0 hover:bg-surface</td><td>min-h-[44px] auf Mobile</td></tr>
<tr><td>Meta column</td><td>w-[88px] shrink-0 flex flex-col gap-1 p-3 border-r border-brand-sand</td><td>feste Breite</td></tr>
<tr><td>Meta column</td><td>w-40 shrink-0 flex flex-col gap-1 p-3 border-r border-line-2</td><td>feste Breite — breit genug für text-sm Namen ohne Umbruch</td></tr>
<tr><td>Author avatar</td><td>w-7 h-7 rounded-full text-[9px] font-bold text-white flex items-center justify-center</td><td>personAvatarColor(userId)</td></tr>
<tr><td>Author name</td><td>font-sans text-sm font-semibold text-ink</td><td></td></tr>
<tr><td>Date</td><td>font-sans text-sm text-ink-3</td><td>formatDate(publishedAt)</td></tr>

2
frontend/src/lib/geschichte/GeschichteListRow.svelte
View File

@@ -24,7 +24,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
class="group flex min-h-[44px] transition-colors hover:bg-canvas/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
<!-- Meta column (desktop) -->
<div class="hidden w-28 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
<div class="hidden w-40 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
<span
aria-hidden="true"
class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"

9
frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts
View File

@@ -45,6 +45,15 @@ describe('GeschichteListRow', () => {
}
});
it('desktop meta column is wide enough for text-sm names (w-40, #802)', async () => {
render(GeschichteListRow, { props: { geschichte: baseRow() } });
const metaColumn = document.querySelector('[class*="border-r"]');
expect(metaColumn).not.toBeNull();
expect(metaColumn!.className).toContain('w-40');
expect(metaColumn!.className).not.toContain('w-28');
});
it('shows no badge for STORY type', async () => {
render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } });
expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();