From ac6e6726a2188a858fdc53228d90aafeff5b256c Mon Sep 17 00:00:00 2001 From: Mark Ritterhoff Date: Fri, 17 Jul 2026 13:32:57 -0400 Subject: [PATCH] Fix clipped mermaid node labels by pinning label line-height The page-level line-height (1.6) cascades into the HTML labels mermaid renders inside SVG foreignObject elements, but mermaid sizes node boxes assuming its own default label line-height (~1.2). Any label that wraps ends up taller than its box and the overflow is clipped. Pin line-height back to 1.2 on foreignObject label elements inside mermaid diagrams so rendered text matches the geometry mermaid measured. Co-Authored-By: Claude Fable 5 --- engine/app/assets/stylesheets/coplan/application.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css index a145536f..a4eb4c6b 100644 --- a/engine/app/assets/stylesheets/coplan/application.css +++ b/engine/app/assets/stylesheets/coplan/application.css @@ -1049,6 +1049,16 @@ img.avatar { height: auto; } +/* Mermaid sizes node boxes assuming its own label line-height (~1.2); the + page's inherited line-height (1.6) makes wrapped labels taller than the + boxes mermaid measured, clipping the second line. Pin labels back to the + height mermaid laid out for. */ +.markdown-rendered .mermaid-diagram foreignObject div, +.markdown-rendered .mermaid-diagram foreignObject span, +.markdown-rendered .mermaid-diagram foreignObject p { + line-height: 1.2; +} + .markdown-rendered .mermaid-diagram--error { border-color: var(--color-danger); }