From 0884a1abcd4cf16e72490fdc3559252ea8ad77e1 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 10 Jun 2026 22:55:29 +0200
Subject: [PATCH] fix(geschichten): widen list meta column so text-sm names fit

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>
---
 docs/specs/geschichten-reader-journey-spec.html          | 2 +-
 frontend/src/lib/geschichte/GeschichteListRow.svelte     | 2 +-
 .../src/lib/geschichte/GeschichteListRow.svelte.spec.ts  | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/specs/geschichten-reader-journey-spec.html b/docs/specs/geschichten-reader-journey-spec.html
index c66fe1af..ac537ed7 100644
--- a/docs/specs/geschichten-reader-journey-spec.html
+++ b/docs/specs/geschichten-reader-journey-spec.html
@@ -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>
diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte
index 88dd34f4..0962f520 100644
--- a/frontend/src/lib/geschichte/GeschichteListRow.svelte
+++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte
@@ -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"
diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts
index 7cb7b360..fee33bb5 100644
--- a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts
+++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts
@@ -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();