From 1e2b386137bc162eb8318f95508de24de2cd0d34 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Thu, 23 Jul 2026 19:23:59 +0000 Subject: [PATCH] Fix wiki prose drifting right on pages without a ToC (#41) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem On wiki article pages **without a ToC drawer** (most feats, short articles), the body text renders pushed ~187px to the right with an empty left gutter — it reads as a broken indent, and the same drift shows in the compose editor. Reported as "Justify broke the editor and text indent". ## Root cause `_wiki-prose.scss` caps every prose block at `--wiki-prose-measure: 54rem` and centers it with `margin-inline: auto`. That centering only looks right when the content column is ~58rem, which the theme only sets up while a ToC drawer is open (`grid-template-columns: minmax(0,58rem) minmax(0,1fr)`). ToC-less pages run the card full page width, so the 54rem paragraph centers inside it with big symmetric gutters, while the full-width callout and fact table make it look inset. `text-align: justify` is the sibling rule in the same block (the visible "Justify" change) but is **not** the cause — justified paragraphs render with no indent once the width is capped. The compose editor breaks the same way: its root is `class="westgate-wiki westgate-wiki-compose"`, so the identical `.westgate-wiki .wiki-article-prose` centering leaks into the editing surface. ## Fix Two scoped rules in the existing `@media (min-width: 1200px)` block: - cap the reading column on non-section article pages (`.wiki-with-fab:not(.wiki-with-fab--section) .wiki-content-layout`) - cap the compose editing surface (`.westgate-wiki-compose .wiki-compose-editor.wiki-article-prose`) Both `max-width: 58rem; margin-inline: auto`, so the card/editor hugs the text and everything shares one left edge — matching the design's "card hugs the text block" intent and the ToC-page geometry. Section / namespace-index listings opt out and keep running full-width, left. ## Verification Reproduced and verified with Playwright against the real compiled CSS and the real editor bundle: - read view: description `left:268` (`margin-left:187px`) in a 1272px card → aligned with the callout in a centered 896px card - editor: description `left:268` (callout at 19) → tidy centered 58rem column SCSS compiles clean (`dart-sass exit=0`). Editor fix verified via local repro with the real bundle (couldn't reach the authed live editor) — worth an eyeball after deploy. 🤖 Generated with [Claude Code](https://claude.com/claude-code)Reviewed-on: https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/pulls/41 Co-authored-by: vickydotbat --- scss/westgate/_wiki-prose.scss | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss index 2da3935..a55b0d3 100644 --- a/scss/westgate/_wiki-prose.scss +++ b/scss/westgate/_wiki-prose.scss @@ -217,6 +217,26 @@ .westgate-wiki .wiki-with-fab:has(.wiki-article-drawer--toc:not([hidden])) .wiki-content-layout { max-width: 58rem; } + + /* Pages without a docked ToC column have nothing to absorb the leftover + width, so the full-bleed card left the measure-capped, margin-inline:auto'd + prose blocks floating in a wide column with big side gutters — reads as a + broken left indent (#31). Cap the reading column itself so the card hugs + the text on every article page, matching the ToC layout. Section listings + (.wiki-with-fab--section) opt out: they run full-width, left. */ + .westgate-wiki .wiki-with-fab:not(.wiki-with-fab--section) .wiki-content-layout { + max-width: 58rem; + margin-inline: auto; + } + + /* Same leak in the compose editor: the root carries .westgate-wiki, so the + measure-cap + margin-inline:auto centers the editable prose in a + full-width editor and the text drifts right of the callout/table. Cap the + editing surface to match the read layout. */ + .westgate-wiki-compose .wiki-compose-editor.wiki-article-prose { + max-width: 58rem; + margin-inline: auto; + } } .westgate-wiki .wiki-article-prose {