From 264d7268c461fb3e2aefc8df20eca6713d806af8 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 10 Jun 2026 22:49:56 +0200 Subject: [PATCH] fix(geschichte-detail): span directory width with centered reading column The detail page stayed at max-w-3xl and looked narrower than every other page. The outer container now matches the directory width (max-w-7xl) so the sheet spans the page like Dokumente/Personen, while an inner max-w-3xl column keeps the prose line length readable. Refs #799 Co-Authored-By: Claude Fable 5 --- .../geschichten-reader-journey-spec.html | 2 +- docs/specs/lesereisen-reader-spec.html | 2 +- .../src/routes/geschichten/[id]/+page.svelte | 122 +++++++++--------- .../geschichten/[id]/page.svelte.test.ts | 14 ++ 4 files changed, 78 insertions(+), 62 deletions(-) diff --git a/docs/specs/geschichten-reader-journey-spec.html b/docs/specs/geschichten-reader-journey-spec.html index 19fe467a..f7f33102 100644 --- a/docs/specs/geschichten-reader-journey-spec.html +++ b/docs/specs/geschichten-reader-journey-spec.html @@ -640,7 +640,7 @@ ElementWertHinweise Artikel-Container - Article containermax-w-3xl mx-auto px-4 py-8zentriert, volle Breite auf Mobile + Article containermax-w-7xl mx-auto px-4 py-8; innere Lesespalte: max-w-3xl mx-autoSeite so breit wie Dokumente/Personen; Textspalte bleibt lesbar zentriert Article sheetrounded-sm border border-line bg-sheet shadow-sm px-5 py-6 sm:px-10 sm:py-10Lesebogen-Panel zwischen Canvas und weißen Karten (Token --color-sheet); BackButton bleibt außerhalb Story titlefont-family:var(--font-display);font-size:clamp(22px,4vw,32px);color:var(--navy)Fraunces, nicht fett Back button<BackButton /> aus $lib/components/BackButton.sveltehistory.back(); nicht <a href> diff --git a/docs/specs/lesereisen-reader-spec.html b/docs/specs/lesereisen-reader-spec.html index 785cd052..7c0756d0 100644 --- a/docs/specs/lesereisen-reader-spec.html +++ b/docs/specs/lesereisen-reader-spec.html @@ -629,7 +629,7 @@ Seitenstruktur Bedingte Logik{#if geschichte.type === 'JOURNEY'} JourneyReader {:else} StoryReader {/if}in +page.svelte von /geschichten/[id] - Artikel-Containermax-w-3xl mx-auto px-4 py-8gleich wie StoryReader + Artikel-Containermax-w-7xl mx-auto px-4 py-8; innere Lesespalte: max-w-3xl mx-autogleich wie StoryReader (R-2) Artikel-Sheetrounded-sm border border-line bg-sheet shadow-sm px-5 py-6 sm:px-10 sm:py-10Lesebogen-Panel zwischen Canvas und weißen Karten (Token --color-sheet), gleich wie Story (R-2); BackButton bleibt außerhalb Journey-Badgeinline-flex px-2 py-px rounded-sm text-[10px] font-bold uppercase tracking-widest bg-journey-tint text-journey border border-journey-border mb-2über dem Titel; nicht für STORY Titelfont-serif text-3xl text-ink leading-tight mb-4gleich wie Story diff --git a/frontend/src/routes/geschichten/[id]/+page.svelte b/frontend/src/routes/geschichten/[id]/+page.svelte index fa0731a3..07cb915f 100644 --- a/frontend/src/routes/geschichten/[id]/+page.svelte +++ b/frontend/src/routes/geschichten/[id]/+page.svelte @@ -48,7 +48,7 @@ async function handleDelete() { } -
+
@@ -57,74 +57,76 @@ async function handleDelete() { aria-labelledby="geschichte-title" class="rounded-sm border border-line bg-sheet px-5 py-6 shadow-sm sm:px-10 sm:py-10" > -
- {#if isJourney} - - {m.journey_badge_detail()} - - {/if} -

- {g.title} -

-
- {#if authorName} +
+
+ {#if isJourney} {/if} -
+

+ {g.title} +

+
{#if authorName} -

{authorName}

+ {/if} - {#if publishedAt} -

- {#if isJourney} - {m.journey_compiled_on({ date: publishedAt })} - {:else} - {m.geschichten_published_on({ date: publishedAt })} - {/if} -

+
+ {#if authorName} +

{authorName}

+ {/if} + {#if publishedAt} +

+ {#if isJourney} + {m.journey_compiled_on({ date: publishedAt })} + {:else} + {m.geschichten_published_on({ date: publishedAt })} + {/if} +

+ {/if} +
+ {#if data.canBlogWrite} +
+ + {m.btn_edit()} + + +
{/if}
- {#if data.canBlogWrite} -
- - {m.btn_edit()} - - -
- {/if} -
-
+
- {#if deleteError} - - {/if} + {#if deleteError} + + {/if} - {#if isJourney} - - {:else} - - {/if} + {#if isJourney} + + {:else} + + {/if} +
diff --git a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts index b4b13aae..d06e23f0 100644 --- a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts +++ b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts @@ -70,6 +70,20 @@ describe('geschichten/[id] page', () => { .toBeVisible(); }); + it('spans the directory width with a centered reading column inside the sheet (#799)', async () => { + render(GeschichtePage, { + context: new Map([[CONFIRM_KEY, createConfirmService()]]), + props: { data: baseData() } + }); + + const outer = document.querySelector('[class*="mx-auto"]'); + expect(outer!.className).toContain('max-w-7xl'); + + const column = document.querySelector('article [class*="max-w-3xl"]'); + expect(column).not.toBeNull(); + expect(column!.className).toContain('mx-auto'); + }); + it('renders the article on a reading-sheet surface card (#797)', async () => { render(GeschichtePage, { context: new Map([[CONFIRM_KEY, createConfirmService()]]),