fix: keep article body in the centered content column#62
Merged
Conversation
PageContent wrapped the article body in `col-screen`, which under
@myst-theme 1.x's CSS cascade beats our base-layer
`.simple-center-grid > * { col-body }` centering rule and renders the
whole body full-bleed — no content column, and the right-hand TOC
margin gets swallowed. Under @myst-theme 0.14 the cascade resolved the
other way, so it only surfaced after the 1.x upgrade (which had never
been deployed).
Drop `col-screen` so top-level blocks fall back to the centered
`col-body` default (matching upstream's `myst-content-blocks` pattern);
individual blocks can still opt into wider columns via their own class.
Verified against the v1.1.1 visual baseline: content is back in the
centered column with the right-hand outline.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR fixes a layout regression introduced by the @myst-theme 0.14 → 1.x upgrade where the article body escaped the centered content column by removing the col-screen class from the main MyST-rendered body container, allowing the grid’s default col-body placement to take effect again.
Changes:
- Remove
col-screenfrom theMySTbody wrapper inPageContent.tsxto prevent full-bleed layout. - Rely on
.simple-center-grid > * { @apply col-body; }to keep body content in the centered column.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mmcky
added a commit
that referenced
this pull request
Jun 4, 2026
Bump 1.1.1 -> 2.0.0 across package.json, package-lock.json and template.yml, and finalize the CHANGELOG [2.0.0] section. 2.0.0 is the @myst-theme 0.14 -> 1.x upgrade (breaking: new notebook output-node AST; Node engine >=20) plus the technical-review pass, the visual-regression harness (#60), and three pre-release fixes for regressions the 1.x upgrade introduced and caught before deploy: the BannerStateProvider 500 (#61), the full-bleed content column (#62), and the Remix 1.19 hydration reload loop (#63). CHANGELOG corrections vs the old [Unreleased] draft: drop the reverted #29 Remix 1.17->1.19 bump (2.0.0 stays on the v1.0.1 ~1.17.0 pin, so no net Remix change), correct the Node floor to >=20, and restate the Security note now that the older Remix v1 toolchain remains. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Under the
@myst-theme0.14 → 1.x upgrade, article body content rendered full-bleed / flush-left (no centered content column, and the right-hand "On this page" TOC margin was swallowed). The page header/H1 stayed in the column but the body escaped it.Root cause
PageContent.tsxwraps the body incol-screen(full-bleed). Ourstyles/app.csscenters grid children via.simple-center-grid > * { @apply col-body }in@layer base, but@myst-theme/styles1.x emits.col-screen { grid-column: screen }in a later cascade layer — socol-screennow wins (equal specificity → source order) and forces full width. Under 0.14 the cascade resolved the other way, so this only surfaced after the 1.x upgrade (which had never been deployed).Fix
Drop
col-screenso top-level blocks fall back to the centeredcol-bodydefault (matching upstream'smyst-content-blockspattern). Individual blocks can still opt into wider columns via their own class.Verification
Rebuilt the theme and rendered the visual-regression fixture; content is back in the centered column with the right-hand outline, matching the committed v1.1.1 baseline. Reproduced and fixed on both the synthetic
features/notebookfixture pages and real lecture content.🤖 Generated with Claude Code