From bfd8c63daaa8420e57da9953922b9f0c94123064 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 12 Sep 2024 11:05:32 +0200
Subject: [PATCH] #5787 Fix for issue with labels in firefox

---
 .changeset/dry-plums-glow.md                      | 5 +++++
 packages/mermaid/src/rendering-util/createText.ts | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/dry-plums-glow.md

diff --git a/.changeset/dry-plums-glow.md b/.changeset/dry-plums-glow.md
new file mode 100644
index 0000000000..810c6c5c87
--- /dev/null
+++ b/.changeset/dry-plums-glow.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Fix for issue with calculation of label width when using in firefox
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 845705210f..4b66334938 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -20,6 +20,11 @@ function applyStyle(dom, styleFn) {
 
 async function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
+  // This is not the final width but used in order to make sure the foreign
+  // object in firefox gets a width at all. The final width is fetched from the div
+  fo.attr('width', `${10 * width}px`);
+  fo.attr('height', `${10 * width}px`);
+
   const div = fo.append('xhtml:div');
   let label = node.label;
   if (node.label && hasKatex(node.label)) {
@@ -201,7 +206,7 @@ export const createText = async (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info(
+  log.debug(
     'XYZ createText',
     text,
     style,