Mermaid diagrams: text labels overflow since 9.0.13

[frankie567]

Context

No response

Bug description

Labels in nodes and arrows are overflowing the size of their nodes.

It happens since version 9.0.13. More specifically, it has probably been introduced by this commit: 5065bf9

Here is how it looked like in 9.0.12 and before:

Suspected root cause

The variable --md-mermaid-font-family is now only defined under the .mermaid class and not in :root anymore. For some reasons, Mermaid compiler may not be able to pick it and thus compute the size of the nodes with its default font instead.

Workaround

If I manually set the variable in :root in custom CSS, it solves the issue:

:root > * {
  --md-mermaid-font-family: var(--md-text-font-family), sans-serif;
}

Related links

• https://squidfunk.github.io/mkdocs-material/reference/diagrams/?h=mermaid#configuration

Reproduction

example.zip

Steps to reproduce

1. Enable Mermaid superfence extension.
2. Add a Mermaid diagram with long labels on nodes and arrows.

Browser

Chrome, Safari, Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting, for the excellent reproduction, and for finding the root cause! I've checked and it seems that we can revert the change in _mermaid.scss, which solves this problem and doesn't re-introduce the problem fixed in #5034.

Fixed in 5b7cf17.

[frankie567]

Thank you for the super quick feedback and fix 🙏

[squidfunk]

Released as part of 9.1.2.