Skip to content

fix(docs): repair migration link and mermaid label clipping#237

Merged
robertsLando merged 1 commit intomainfrom
fix/docs-site-broken-link-and-mermaid-clipping
Apr 15, 2026
Merged

fix(docs): repair migration link and mermaid label clipping#237
robertsLando merged 1 commit intomainfrom
fix/docs-site-broken-link-and-mermaid-clipping

Conversation

@robertsLando
Copy link
Copy Markdown
Member

Summary

  • Broken link on landing pagedocs-site/index.md: the [migration guide](/guide/migration) link inside <div class="fork-banner"> was rendered as literal text because raw HTML blocks don't parse inline markdown without blank-line separation. The div now wraps blank-line-separated markdown content so the link resolves to /pkg/guide/migration.
  • Mermaid label clipping — in every multi-line node label, the last line was cut off below the node rect (e.g. User code / fs.readFileSync / /snapshot/app/x.js, Executable with / custom VFS, Traditional / walker + bytecode). Mermaid renders label text through a markdown parser that wraps lines in <p> tags; the browser's default <p> margin inflated the rendered label height beyond the foreignObject height mermaid had pre-measured. Added CSS to zero <p> margins inside .nodeLabel / .edgeLabel / .cluster-label / .label and normalized line-height.
  • Mermaid font alignment.vitepress/config.ts: set themeVariables.fontSize: '15px' and flowchart.padding: 12 so mermaid's layout math matches the 15px font-size applied by custom.css.

Test plan

  • npx vitepress build succeeds with no dead-link errors
  • Verified in preview that the landing page renders the migration link as a proper anchor
  • Verified that all mermaid diagrams on /pkg/architecture render every label line inside its node box with no bottom clipping — both 2-line and 3-line labels
  • Pre-commit hook (lint-staged + prettier) passes

🤖 Generated with Claude Code

- index.md: markdown link inside the fork-banner <div> was rendered as
  literal text because raw HTML blocks don't parse inline markdown
  without blank-line separation. Convert the block to use markdown
  content with surrounding blank lines so [migration guide] resolves.
- custom.css: zero the default <p> margin inside mermaid nodeLabel /
  edgeLabel / cluster-label / label. Mermaid wraps label text in <p>
  via its markdown parser; the browser's default <p> margin inflated
  the rendered label height beyond the foreignObject size mermaid had
  pre-measured, clipping the last line below the node rect.
- config.ts: set themeVariables.fontSize to 15px and add flowchart
  padding so mermaid's layout math matches the 15px rendered text.
@robertsLando robertsLando merged commit 7a97430 into main Apr 15, 2026
27 checks passed
@robertsLando robertsLando deleted the fix/docs-site-broken-link-and-mermaid-clipping branch April 15, 2026 12:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant