Description

For certain lengths of the label in an ER diagram, the label gets cut at an arbitrary point after the dash (-).

Example in the diagram above:

• LINE-ITEM renders LINE-
• LINE-ITE renders LINE-ITE
• LINE-IT renders LINE- again

I believe it has to do with how Safari handles rendering portions of a pixel (i.e., partial pixels are not rendered and instead rounded up/down to the nearest integer value). See screenshots.

I am not sure whether a simple Math.ceil is the right thing to do here, as I am not entirely aware of the consequences of such change. I am happy to contribute code myself if needed.

Linked from #6592

Steps to reproduce

Playground

Screenshots

How it's rendered

How it renders by rounding up

Code Sample

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response