fix: centre mermaid diagrams in their container - #64
Merged
Conversation
pre.mermaid already sets text-align:center, but mermaid gives the <svg> it swaps in display:block, and a block box ignores text-align. A diagram narrower than the reading column therefore sat flush left: measured at 21px from the left edge with 551px of space on the right. Centred with margin-inline:auto instead. The rule lives in the action's doc.css, so it applies to bundles published from here on. Docs published by an earlier version of the action keep their existing stylesheet until they re-publish. Closes #63 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QqFK6yffibtCBTF8xZ4hXW
oto-macenauer-absa
force-pushed
the
fix/centre-mermaid-diagrams
branch
from
August 14, 2026 12:32
bf6a52f to
039f091
Compare
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
1 participant
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.
What
.mp-doc pre.mermaidalready setstext-align: center. It never worked for narrow diagrams, because mermaid gives the<svg>it swaps indisplay: block— and a block box ignores its parent'stext-align. Wide diagrams filled the column so it looked fine; narrow ones sat flush left.Measured in the browser, 800px reading column, before:
After:
left: 275px, right: 275px.Changes
One line, in
actions/publish-single-page-docs/src/template.js(DOC_CSS):plus the regenerated test fixture
doc.cssthat mirrors it.Docs published by an earlier version of the action keep their existing stylesheet until they re-publish.
Verification
Centring itself is verified by browser measurement (the table above), not by a test: the committed fixture stubs mermaid with a no-op — the real bundle is 2.5 MB and is deliberately not committed — so a fixture-based layout assertion would pass without ever rendering an SVG.
Closes #63