Pages use the full width of the content area #100

New Issue

fable-5 · 2026-07-12T04:03:18+02:00

fable-5 commented

2026-07-12 04:03:18 +02:00

Context

Page content is centered at max-width: 48rem in both view and edit mode; on wide screens most of the content area is empty margin. Pages should use the full available width — especially valuable together with the resizable sidebar.

Scope

Remove the fixed 48rem cap on .editor-page so view AND edit mode fill the content area (minus sensible padding). Check the follow-on layouts that assumed the narrow column: .editor-page__body side panels (history, labels, attachments, comments), the toolbar row, tables/code blocks (horizontal scrolling inside the content, never the page), and the backlinks panel. Readability of very long lines is the editor's concern — if a line-length guard is wanted later, it becomes a user setting, not a hard cap (out of scope here).

Acceptance criteria

in view mode the rendered page spans the content area's full width
in edit mode the editor spans the same width; side panels open next to it without pushing content off-screen
no horizontal page scrolling at any viewport; wide tables/code blocks scroll inside their own container
the public read view (PublicPageView / server-rendered HTML shell) is explicitly left unchanged (its own reading layout)

Technical notes

The single narrowing rule is .editor-page { max-width: 48rem; margin: 0 auto; } (apps/web/src/styles/base.css:588). .editor-shell already flexes (flex: 1 1 auto; min-width: 0).

Dependencies

Pairs well with the resizable sidebar (previous issue), no hard dependency.

Size: ~0.5 days

Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context Page content is centered at `max-width: 48rem` in both view and edit mode; on wide screens most of the content area is empty margin. Pages should use the full available width — especially valuable together with the resizable sidebar. ## Scope Remove the fixed 48rem cap on `.editor-page` so view AND edit mode fill the content area (minus sensible padding). Check the follow-on layouts that assumed the narrow column: `.editor-page__body` side panels (history, labels, attachments, comments), the toolbar row, tables/code blocks (horizontal scrolling inside the content, never the page), and the backlinks panel. Readability of very long lines is the editor's concern — if a line-length guard is wanted later, it becomes a user setting, not a hard cap (out of scope here). ## Acceptance criteria - [ ] in view mode the rendered page spans the content area's full width - [ ] in edit mode the editor spans the same width; side panels open next to it without pushing content off-screen - [ ] no horizontal page scrolling at any viewport; wide tables/code blocks scroll inside their own container - [ ] the public read view (`PublicPageView` / server-rendered HTML shell) is explicitly left unchanged (its own reading layout) ## Technical notes - The single narrowing rule is `.editor-page { max-width: 48rem; margin: 0 auto; }` (apps/web/src/styles/base.css:588). `.editor-shell` already flexes (`flex: 1 1 auto; min-width: 0`). ## Dependencies Pairs well with the resizable sidebar (previous issue), no hard dependency. **Size**: ~0.5 days --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*

fable-5 added this to the M10 — UI polish milestone 2026-07-12 04:03:18 +02:00

fable-5 added the

frontend

label 2026-07-12 04:03:18 +02:00

fable-5 referenced this issue from a commit

2026-07-12 04:24:24 +02:00

Let pages use the full width of the content area (#100)

fable-5 commented

2026-07-12 04:54:40 +02:00

Umgesetzt in 49e4377 (CI grün, HEAD-Lauf e740ea6 komplett grün).

Was drin ist

Das 48rem-Cap auf .editor-page ist weg — View- und Edit-Modus füllen die Content-Fläche (Padding von .main bleibt).
Gefundene Falle: .app-body brauchte min-width: 0. Als Grid-Item von .app hat es ein automatisches min-content-Minimum; ohne Cap drückte die Button-Zeile die GESAMTE App breiter als den Viewport (Topbar 1830px bei 1728er-Fenster) → horizontales Seiten-Scrollen. Mit dem Fix schrumpft .main korrekt.
.editor-page__header bekam flex-wrap als Interim, damit die (bis #101 noch grünen) Action-Buttons umbrechen statt überzulaufen — seit #101 trägt der Header ohnehin nur noch den Titel.
Codeblöcke scrollen weiter in ihrem eigenen Container (overflow-x: auto auf pre bestand schon); Tabellen sind width: 100% im breiteren Container.
PublicPageView (.public-page, 48rem) und die server-gerenderte HTML-Shell sind explizit unverändert.

Verifiziert im Browser: View + Edit volle Breite; History-Panel öffnet neben dem Editor ohne Inhalt aus dem Bild zu schieben; document.documentElement.scrollWidth === innerWidth in View und Edit (vorher 1830 > 1728).

Umgesetzt in `49e4377` (CI grün, HEAD-Lauf `e740ea6` komplett grün). **Was drin ist** - Das 48rem-Cap auf `.editor-page` ist weg — View- und Edit-Modus füllen die Content-Fläche (Padding von `.main` bleibt). - **Gefundene Falle:** `.app-body` brauchte `min-width: 0`. Als Grid-Item von `.app` hat es ein automatisches min-content-Minimum; ohne Cap drückte die Button-Zeile die GESAMTE App breiter als den Viewport (Topbar 1830px bei 1728er-Fenster) → horizontales Seiten-Scrollen. Mit dem Fix schrumpft `.main` korrekt. - `.editor-page__header` bekam `flex-wrap` als Interim, damit die (bis #101 noch grünen) Action-Buttons umbrechen statt überzulaufen — seit #101 trägt der Header ohnehin nur noch den Titel. - Codeblöcke scrollen weiter in ihrem eigenen Container (`overflow-x: auto` auf `pre` bestand schon); Tabellen sind `width: 100%` im breiteren Container. - `PublicPageView` (`.public-page`, 48rem) und die server-gerenderte HTML-Shell sind explizit unverändert. **Verifiziert** im Browser: View + Edit volle Breite; History-Panel öffnet neben dem Editor ohne Inhalt aus dem Bild zu schieben; `document.documentElement.scrollWidth === innerWidth` in View und Edit (vorher 1830 > 1728).

fable-5 closed this issue

2026-07-12 04:54:49 +02:00

Sign in to join this conversation.