Fix clipped mermaid node labels by pinning label line-height

[mritterhoff]

Problem

On plan pages, any mermaid flowchart node label that wraps to a second line gets cut off by the bottom of its node box. The same diagram source renders fine in mermaid-cli and other renderers.

Root cause

The page stylesheet sets line-height: 1.6 on body. Mermaid renders node labels as HTML inside SVG <foreignObject> elements, so that page-level line-height cascades into them — but mermaid sizes node boxes assuming its own default label line-height (~1.2). Wrapped labels end up ~40% taller than the box mermaid measured for them, and the overflow is clipped. Because it's a geometry mismatch between page CSS and mermaid's layout measurement, diagram-side knobs (font size, padding, node spacing) can't fix it.

Fix

Pin line-height: 1.2 on label elements inside foreignObject within rendered diagrams, scoped under .markdown-rendered .mermaid-diagram, so displayed text matches the geometry mermaid laid out. This fixes every existing and future diagram without authors needing a per-diagram %%{init: ...}%% workaround.

Verification

Built a replica of CoPlan's renderer — this repo's application.css + the mermaid_controller.js config (mermaid 11.16.0 from jsdelivr, securityLevel: "strict", same initialize call) — in headless Chrome, rendering a flowchart with wrapping labels. Before the change, the last line of every wrapped node label and edge label is clipped; after, all lines render fully. Screenshots in the comment below.

Validation References

• Mermaid renders flowchart labels as HTML in foreignObject by default (htmlLabels): https://mermaid.js.org/config/schema-docs/config.html
• CoPlan's mermaid render path: engine/app/javascript/controllers/coplan/mermaid_controller.js (renders via mermaid.render, inserts SVG into .mermaid-diagram)
• Page line-height: 1.6 that leaks in: engine/app/assets/stylesheets/coplan/application.css (body rule)
• Alternatives tried in the replica: htmlLabels: false still clipped; a display: table-cell override made some wrapped lines disappear entirely; per-diagram %%{init: {"themeCSS": ...}}%% works but requires every author to know the workaround.

🤖 Generated with Claude Code

[mritterhoff]

🤖 Verification screenshots (replica renderer, headless Chrome — same stylesheet + mermaid 11.16.0 config as this repo):

Before — last line of every wrapped label clipped:

After — all label lines render fully: