fix: scale wide Mermaid diagrams to fit the column (stop sidebar overlap)#878
Merged
Conversation
…lap) The Mermaid renderer bakes a hard pixel width/height into the SVG (e.g. width="1204"), so a wide LR flowchart overflowed the article column and spilled across the "On this page" sidebar (see recursive-self-improvement-rsi). The <div class="mermaid-diagram"> replaces <pre>, so it was capped at the 66ch reading measure while the SVG inside it rendered at its full intrinsic width with nothing clamping it. Fix (CSS only): - add .mermaid-diagram to the full-column media list (like img/figure/pre/ table) so the diagram gets the whole column instead of 66ch. - clamp the SVG: max-width:100%; height:auto. The SVG carries a viewBox, so this scales the whole diagram down proportionally to fit — the same responsive pattern the <img> handler already uses. overflow-x:auto is a safety net. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Review nit: max-width:100% on the SVG already prevents horizontal overflow, so overflow-x:auto never actually scrolls — reword so the comment doesn't overclaim it as a safety net. 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
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.
Problem
On recursive-self-improvement-rsi the RSI flowchart renders far wider than the article column and spills across the "On this page" sidebar — nodes like
Improve?/Keep Currentland on top of the TOC.Cause
The Mermaid renderer (beautiful-mermaid) bakes a hard pixel width into the SVG (
width="1204"for this chart) alongside itsviewBox. The<div class="mermaid-diagram">replaces<pre>, so.prose-article > *capped the div at the 66ch reading measure — but nothing constrained the SVG inside it, which rendered at its full 1204px intrinsic width and overflowed.Fix (CSS only)
.mermaid-diagramto the full-column media list (img, figure, pre, table, hr) so a diagram gets the whole column instead of 66ch.max-width:100%; height:auto. Because the SVG has aviewBox, this scales the whole diagram down proportionally to fit the column (CSSmax-widthoverrides the presentationwidthattribute;height:autorecomputes from the viewBox ratio). Same responsive pattern the<img>handler already uses (MarkdownRenderer.tsx:189).overflow-x:autois a safety net.No content change — fixes every wide diagram site-wide, not just this page.
Test
pnpm buildgreen. CSS-only; no logic/tests affected.viewBox="0 0 1204.396 200.784"+ hardwidth/height.🤖 Generated with Claude Code