Text overflow for notes in Mermaid sequence diagrams in Firefox

[bertrand-sb]

Context

No response

Bug description

In Mermaid sequence diagrams, notes over a single participant can overflow but only in Firefox:

The same in Chrome:

Note that Firefox is fine in Mermaid's live editor:

Related links

• How to do sequence diagrams: https://squidfunk.github.io/mkdocs-material/reference/diagrams/
• Similar issue, reportedly fixed in the latest version of Material for MkDocs: Text in mermaid diagrams overflows in Firefox #4429
• Similar issue in Mermaid, still open: Note text overflows boundaries when action names are shorter mermaid-js/mermaid#3229
  • Note that this issue if only for when a note is put over an arrow between two participants (e.g. note over A,B: Note with overflow). It is different from the issue being reported here.

Reproduction

example.zip

Steps to reproduce

I have a single docs/index.md file with the following content:

```mermaid
sequenceDiagram
    participant A
    participant B
    A->>B: hello

    note over A: Note with overflow but only in Firefox.
```

Configuration:

site_name: My Docs

theme:
  name: material

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

Versions:

• mkdocs: 1.4.2
• mkdocs-material: 9.0.11

Browser

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 and providing the excellent reproduction. I've investigated and the problem does not only happen for notes. There are still some text boxes running out of their containing rectangles (see second graph taken from our docs), and after fiddling a little with it, I don't think that we can solve this problem on our side:

Luckily, there's a good upstream candidate that was merged 3 weeks ago and waits for a release. Let's see if that fixes the issue. Regardless, this must really be fixed upstream. Related:

• Parse style string and number font size values from configuration inputs mermaid-js/mermaid#3993