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