From 9e43af7b4a702d4f74c7cdbcf239b963666262d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Fri, 16 Sep 2022 15:52:04 +0200
Subject: [PATCH] Fix unnecessary vertical whitespace in Mermaid graphs (#1415)

---
 assets/js/lib/markdown.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/js/lib/markdown.js b/assets/js/lib/markdown.js
index ab0ac865d..8ef8dc3f1 100644
--- a/assets/js/lib/markdown.js
+++ b/assets/js/lib/markdown.js
@@ -45,6 +45,8 @@ class Markdown {
       // can use morphdom's childrenOnly option
       const wrappedHtml = `<div>${html}</div>`;
       morphdom(this.container, wrappedHtml, { childrenOnly: true });
+
+      this._fixMermaidSpacing();
     });
   }
 
@@ -83,6 +85,13 @@ class Markdown {
         })
     );
   }
+
+  _fixMermaidSpacing() {
+    // A workaround for https://github.com/mermaid-js/mermaid/issues/1758
+    for (const svg of this.container.querySelectorAll(".mermaid svg")) {
+      svg.removeAttribute("height");
+    }
+  }
 }
 
 export default Markdown;
@@ -171,7 +180,11 @@ function remarkPrepareMermaid(options) {
     visit(ast, "code", (node, index, parent) => {
       if (node.lang === "mermaid") {
         node.type = "html";
-        node.value = `<div class="mermaid">${escapeHtml(node.value)}</div>`;
+        node.value = `
+          <div class="mermaid max-h-[600px] overflow-auto tiny-scrollbar">
+            ${escapeHtml(node.value)}
+          </div>
+        `;
       }
     });
   };