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 650cc8a17ee3eb0d961c9b05efd02bdfa1c03c1e..778570729ea66f0f8a94f4ebea6451d83d8bb29c 100644 (file)
--- 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 */