Text in mermaid diagrams overflows in Firefox

Contribution guidelines

• I’ve read the contribution guidelines and wholeheartedly agree

I’ve found a bug and checked that …

• … the problem doesn’t occur with the mkdocs or readthedocs themes
• … the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• … the documentation does not mention anything about my problem
• … there are no open or closed issues that are related to my problem

Description

I’m using mermaid sequence diagrams and seeing some issues on Firefox vs Chrome:

1. text does not fit inside the notes block
2. text (inscriptions on the arrows, messages) is not strictly above the arrows, but slides down on them

Expected behaviour

The text is displayed in the same way as in Google Chrome in any browser:

1. text fits inside the notes, loops and other blocks
2. text (inscriptions on the arrows, messages) is strictly above the arrows

Actual behaviour

on Firefox vs Chrome:

1. text does not fit inside the notes, loops and other blocks
2. text (inscriptions on the arrows, messages) is not strictly above the arrows, but slides down on them

Steps to reproduce

This can be reproduced on the main docs (just open it in Firefox but not Chrome): https://squidfunk.github.io/mkdocs-material/reference/diagrams/#using-sequence-diagrams

In this example the note is small but if it will be bigger than it would not fits inside the block

Package versions

This can be replicated on the main docs

Configuration

This can be replicated on the main docs

System information

MacOS 12.2.1 (21D62) Monterey

• Firefox 102.0.1 (64-bit) - issue present
• Chrome 104.0.5112.101 (Official Build) (x86_64) - no issue
• Safari 15.3 (17612.4.9.1.8) - no issue

[facelessuser]

Yep, that turned out to be the exact fix I had done in my code, which I see is now why I did not have the same issue.

Apparently, I had even documented it:

      sequence: {
        useMaxWidth: false,
        // Mermaid handles Firefox a little different.
        // For some reason, it doesn't attach font sizes to the labels in Firefox.
        // If we specify the documented defaults, font sizes are written to the labels in Firefox.
        noteFontWeight: "14px",
        actorFontSize: "14px",
        messageFontSize: "16px"
      },

[facelessuser]

Oh, that makes sense. I was just curiously looking to see if I had inadvertently done the same thing on accident, then I saw the comment and realized I had done it purposely, not accidentally 🙃.