From 6842b316ec83ee8b35aa2c2e659d84a15f18901c Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Wed, 12 Jun 2024 08:49:58 +0200
Subject: [PATCH] Correccted bug with innen height in composite diags

---
 cypress/platform/per.html                     | 24 +++++++++++++------
 .../rendering-elements/clusters.js            |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index e6a88642a..4ac3bb35b 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -89,6 +89,19 @@ stateDiagram-v2
       </pre
     >
 
+    <pre id="diagram" class="mermaid2">
+      stateDiagram
+        [*] --> Still
+        Still --> [*]
+        Still --> Moving
+        Moving --> Still
+        Moving --> Crash
+        Crash --> [*]
+
+
+
+    </pre>
+
     <pre id="diagram" class="mermaid">
       stateDiagram
         direction LR
@@ -100,11 +113,7 @@ stateDiagram-v2
           a --> b
         }
         B --> D
-
-
-
-            </pre
-    >
+    </pre>
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
@@ -122,15 +131,16 @@ stateDiagram-v2
         // layout: 'elk',
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
+        //fontFamily: 'Kalam',
         fontFamily: 'Arial',
         sequence: {
           actorFontFamily: 'arial',
           noteFontFamily: 'arial',
           messageFontFamily: 'arial',
         },
-        fontSize: 12,
+        fontSize: 10,
         logLevel: 0,
+        htmlLabels: true,
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index ec446c59d..c6a700ff1 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -215,7 +215,7 @@ const roundedWithTitle = (parent, node) => {
   const y = node.y - node.height / 2 - halfPadding;
   const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
   const height = node.height + padding;
-  const innerHeight = node.height + padding - bbox.height - 2;
+  const innerHeight = node.height + padding - bbox.height - 6;
   const look = siteConfig.look;
 
   // add the rect