From 50def73d80ac23a3b93f009b25fb726c3a619978 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 10 Jun 2026 22:53:40 +0200 Subject: [PATCH] fix(geschichten): scale list row typography to the full-width layout Rows kept their compact sizes (15px titles, 12px excerpts/meta) after the overview widened to max-w-7xl, leaving the text undersized in full-width rows. Title is now text-lg, excerpt and meta text-sm; R-1 impl-ref updated. Closes #802 Co-Authored-By: Claude Fable 5 --- .../geschichten-reader-journey-spec.html | 8 ++++---- .../lib/geschichte/GeschichteListRow.svelte | 12 +++++------ .../GeschichteListRow.svelte.spec.ts | 20 +++++++++++++++++++ 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/docs/specs/geschichten-reader-journey-spec.html b/docs/specs/geschichten-reader-journey-spec.html index f7f33102..c66fe1af 100644 --- a/docs/specs/geschichten-reader-journey-spec.html +++ b/docs/specs/geschichten-reader-journey-spec.html @@ -426,11 +426,11 @@ List rowflex gap-0 border-b border-brand-sand last:border-0 hover:bg-surfacemin-h-[44px] auf Mobile Meta columnw-[88px] shrink-0 flex flex-col gap-1 p-3 border-r border-brand-sandfeste Breite Author avatarw-7 h-7 rounded-full text-[9px] font-bold text-white flex items-center justify-centerpersonAvatarColor(userId) - Author namefont-sans text-xs font-semibold text-ink - Datefont-sans text-xs text-ink-3formatDate(publishedAt) + Author namefont-sans text-sm font-semibold text-ink + Datefont-sans text-sm text-ink-3formatDate(publishedAt) Person chipinline-flex items-center gap-1 rounded-full bg-surface border border-line px-2 py-0.5 text-[10px] font-medium text-inklinks zu /persons/[id]; optional - Story titlefont-serif text-[15px] text-ink leading-snug mb-1 hover:text-primarylink zu /geschichten/[id] - Excerptfont-sans text-xs text-ink-3 line-clamp-2max. 150 Zeichen aus body + Story titlefont-serif text-lg text-ink leading-snug mb-1 hover:text-primarylink zu /geschichten/[id] + Excerptfont-sans text-sm text-ink-3 line-clamp-2max. 150 Zeichen aus body Filter Filter pill (inaktiv)rounded-full border border-line px-3 py-1 text-xs font-semibold text-ink-2 hover:bg-mutedaria-pressed="false" Filter pill (aktiv)rounded-full bg-primary text-primary-fg px-3 py-1 text-xs font-semiboldaria-pressed="true" diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte index babfe9b7..88dd34f4 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte @@ -32,9 +32,9 @@ const authorName = $derived(formatAuthorName(geschichte.author)); > {getInitials(authorName)} - {authorName} + {authorName} {#if publishedAt} - {publishedAt} + {publishedAt} {/if} {#if isJourney} {getInitials(authorName)} - {authorName} + {authorName} {#if publishedAt} - {publishedAt} + {publishedAt} {/if}
-

+

{geschichte.title}

{#if isJourney} @@ -82,7 +82,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
{#if geschichte.body} -

+

{plainExcerpt(geschichte.body, 150)}

{/if} diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts index b06f5ae8..7cb7b360 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts @@ -25,6 +25,26 @@ describe('GeschichteListRow', () => { .toHaveTextContent('Die Reise nach Berlin'); }); + it('row text sizes suit the full-width list: title text-lg, excerpt/meta text-sm (#802)', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow() } }); + + const title = document.querySelector('h2'); + expect(title!.className).toContain('text-lg'); + expect(title!.className).not.toContain('text-[15px]'); + + const excerpt = document.querySelector('p'); + expect(excerpt!.className).toContain('text-sm'); + expect(excerpt!.className).not.toContain('text-xs'); + + const meta = Array.from(document.querySelectorAll('span')).filter((s) => + s.textContent?.includes('Anna Schmidt') + ); + expect(meta.length).toBeGreaterThan(0); + for (const span of meta) { + expect(span.className).toContain('text-sm'); + } + }); + it('shows no badge for STORY type', async () => { render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } }); expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();