Geschichten/Lesereise detail page renders flat on the canvas — article has no reading-sheet surface, page looks empty #797

New Issue

marcel · 2026-06-10T22:15:09+02:00

marcel commented

2026-06-10 22:15:09 +02:00

Problem

On /geschichten/[id] (both STORY and JOURNEY type), the article content sits directly on the sand canvas (--c-canvas #f0efe9) with no visual container. The page reads as flat and empty — especially for short stories where most of the viewport is bare canvas.

The spec mockups show the article on a distinct light "reading sheet" panel:

docs/specs/geschichten-reader-journey-spec.html — R-2 mockup: .g-article = background:#FAFAF7; border-radius:6px; padding:16px 20px; max-width:640px; margin:0 auto on a darker #E8E7E2 backdrop
docs/specs/lesereisen-reader-spec.html — LR-2 inherits the same article container ("gleich wie StoryReader")

Root cause of the deviation: the spec is internally inconsistent. The R-2 mockup shows the sheet panel, but the R-2 impl-ref table only specifies max-w-3xl mx-auto px-4 py-10 — no surface, border, or shadow. The implementation followed the impl-ref, so the sheet was never built.

Fix

In frontend/src/routes/geschichten/[id]/+page.svelte (single change covers both Story and Journey readers, including delete-error banner inside the sheet):

Keep BackButton outside the sheet (consistent with the rest of the app — back nav lives on the canvas).
Wrap the <article> in the standard card pattern from CLAUDE.md, translated to brand tokens:
- rounded-sm border border-line bg-surface shadow-sm
- generous reading padding, responsive: px-5 py-6 sm:px-10 sm:py-10
Outer container stays max-w-3xl mx-auto px-4 py-8.

Dark mode needs no extra work — bg-surface / border-line are mode-aware tokens in layout.css.

Also

Update the impl-ref tables in both spec files (R-2 "Article container" row, LR-2 "Artikel-Container" row) to include the sheet classes, so the mockup and impl-ref agree and future agents don't regress this.
Check /geschichten/[id]/edit and /geschichten/new visually after the change — they should keep their current layout; this issue only targets the reader view.

Acceptance criteria

Story detail and Journey detail render the article on a white (light mode) sheet with border + subtle shadow on the sand canvas
BackButton remains outside the sheet
Mobile (≤640px): sheet keeps reduced padding, no horizontal overflow
Dark mode: sheet uses dark surface token, border visible
Both spec impl-ref tables updated to match the mockup

## Problem On `/geschichten/[id]` (both STORY and JOURNEY type), the article content sits directly on the sand canvas (`--c-canvas` `#f0efe9`) with no visual container. The page reads as flat and empty — especially for short stories where most of the viewport is bare canvas. The spec mockups show the article on a distinct light "reading sheet" panel: - `docs/specs/geschichten-reader-journey-spec.html` — R-2 mockup: `.g-article` = `background:#FAFAF7; border-radius:6px; padding:16px 20px; max-width:640px; margin:0 auto` on a darker `#E8E7E2` backdrop - `docs/specs/lesereisen-reader-spec.html` — LR-2 inherits the same article container ("gleich wie StoryReader") **Root cause of the deviation:** the spec is internally inconsistent. The R-2 *mockup* shows the sheet panel, but the R-2 *impl-ref table* only specifies `max-w-3xl mx-auto px-4 py-10` — no surface, border, or shadow. The implementation followed the impl-ref, so the sheet was never built. ## Fix In `frontend/src/routes/geschichten/[id]/+page.svelte` (single change covers both Story and Journey readers, including delete-error banner inside the sheet): 1. Keep `BackButton` outside the sheet (consistent with the rest of the app — back nav lives on the canvas). 2. Wrap the `<article>` in the standard card pattern from CLAUDE.md, translated to brand tokens: - `rounded-sm border border-line bg-surface shadow-sm` - generous reading padding, responsive: `px-5 py-6 sm:px-10 sm:py-10` 3. Outer container stays `max-w-3xl mx-auto px-4 py-8`. Dark mode needs no extra work — `bg-surface` / `border-line` are mode-aware tokens in `layout.css`. ## Also - Update the impl-ref tables in **both** spec files (R-2 "Article container" row, LR-2 "Artikel-Container" row) to include the sheet classes, so the mockup and impl-ref agree and future agents don't regress this. - Check `/geschichten/[id]/edit` and `/geschichten/new` visually after the change — they should keep their current layout; this issue only targets the reader view. ## Acceptance criteria - [ ] Story detail and Journey detail render the article on a white (light mode) sheet with border + subtle shadow on the sand canvas - [ ] BackButton remains outside the sheet - [ ] Mobile (≤640px): sheet keeps reduced padding, no horizontal overflow - [ ] Dark mode: sheet uses dark surface token, border visible - [ ] Both spec impl-ref tables updated to match the mockup

marcel added the P1-high bug ui labels 2026-06-10 22:15:15 +02:00

marcel referenced this issue from a commit

2026-06-10 22:25:16 +02:00

feat(geschichte-detail): render article on a reading-sheet surface card

marcel referenced this issue from a commit

2026-06-10 22:32:32 +02:00

feat(ui): add sheet surface token between canvas and white cards

marcel referenced this issue

2026-06-10 23:06:48 +02:00

feat(journey-editor): JourneyEditor frontend — issue #753 #792

marcel referenced this issue

2026-06-10 23:15:49 +02:00