From: Alexander Wilms <redacted>
Date: Fri, 27 Jun 2025 01:08:57 +0000 (+0200)
Subject: feat(mermaid-viewer): Recenter diagrams on window resize
X-Git-Url: http://source.bookstackapp.com/hacks/commitdiff_plain/refs/pull/9/head?ds=inline

feat(mermaid-viewer): Recenter diagrams on window resize

Adds event listener to recenter mermaid diagrams when the window is resized.
---

diff --git a/content/mermaid-viewer/head.html b/content/mermaid-viewer/head.html
index 650cc8a..7785707 100644
--- a/content/mermaid-viewer/head.html
+++ b/content/mermaid-viewer/head.html
@@ -442,14 +442,16 @@
         initializeMermaidViewers();
     }
 
-    // Re-center diagrams on window load, as images/fonts inside SVG might affect size
+    const recenterAllViewers = () => mermaidViewers.forEach(viewer => viewer.centerDiagram());
+
+    // Re-center diagrams on window load and window resize, as images/fonts inside SVG might affect size
     window.addEventListener('load', () => {
-        mermaidViewers.forEach(viewer => {
-            // Delay slightly to ensure mermaid rendering is fully complete and dimensions are stable
-            setTimeout(() => viewer.centerDiagram(), 100);
-        });
+        // Delay slightly to ensure mermaid rendering is fully complete and dimensions are stable
+        setTimeout(recenterAllViewers, 100);
     });
 
+    window.addEventListener('resize', recenterAllViewers);
+
 </script>
 <style>
     /* Use BookStack's CSS variables for seamless theme integration */