Mermaid diagram gets cut off at the bottom

[corinnekaryiu]

Hi, this is a strange issue I've noticed on Primary. When I have a long Mermaid graph, the SVG gets cut off at the bottom. I'm using v0.14.7 on Mac.

For example, if I use this codeblock:

graph TD
1([Tadasana]) --> 2[Urdhva Hastasana] --> 3[Uttanasana] --> 4[Ardha Uttanasana] --> 5[Phalakasana] --> 6[Chaturanga Dandasana] --> 7[Urdva Mukha Svanasana] --> 8[Adho Mukha Svanasana] --> 9[Anjaneyasana] --> 4[Ardha Uttanasana] --> 3[Uttanasana] --> 1([Tadasana])
class 1,2,3,4,5,6,7,8,9 internal-link

... it gets cut off on Primary and is misaligned to the right:

... but on the default theme it looks fine:

... it also works correctly on the LYT theme where it is centered as intended:

The vault I'm testing this with has no community plugins, snippets or custom style settings enabled. I've tried using the inspector to work out what is causing this, but haven't managed to figure it out yet.

My temporary fix is to add overflow: visible to .mermaid svg but this does mean that any blocks below will overlap, so it's not ideal.

---

EDIT:

I think I've figured out why this issue is happening, but don't know the root cause.

When using the Primary theme, the diagram renders in HTML with the following properties: height="801.984375" viewBox="-111.4375 -30.234375 369.3125 801.984375"

On the default theme, it renders like so: height="812" viewBox="0 0 266.703125 812" and on LYT: height="812" viewBox="0 0 257.8828125 812"

So something in Primary seems to be causing the SVG to load with the incorrect height and a strange offset in the viewBox 🤔

---

Would be great if you could look into this or let me know what might be causing it! Thanks 🙂

[corinnekaryiu]

Hey @ceciliamay, thanks so much for looking into this!

Unfortunately, even after updating the theme, it hasn't fixed the issue. However, I think I've figured it out!! 🙌🏻

I noticed that the diagram only gets cut off when I'm using internal links within the graph - the CSS transition effect on these links seems to be conflicting with the sizing of the Mermaid diagram. I fixed it by adding this into one of my snippets:

.mermaid .internal-link {
  transition: none !important;
}

I hope this helps - feel free to add this into a future update if it helps! 😄

[ceciliamay]

hey there! investigated this issue today, and with primary v2.8.0 (and now v2.10.0-beta), the issue doesn't seem to be occurring anymore. so i will close it now. thank you for all your help!! i appreciate it a lot 💛