diff --git a/assets/js/lib/mermaid.js b/assets/js/lib/mermaid.js
index af9d24aa..6821b29d 100644
--- a/assets/js/lib/mermaid.js
+++ b/assets/js/lib/mermaid.js
@@ -286,11 +286,11 @@ function collectMermaidContainers(root = document) {
  */
 async function renderActiveLayerInContainer(container) {
   if (!container) return
-  const el = container.querySelector(isDarkMode() ? '.mermaid-dark' : '.mermaid')
+  const darkMode = isDarkMode()
+  const el = container.querySelector(darkMode ? '.mermaid-dark' : '.mermaid')
   if (!el) return
   if (el.hasAttribute('data-processed') || el.querySelector('svg')) return
   if (!isNodeVisuallyActive(el)) return
-  const darkMode = isDarkMode()
   await renderMermaidElement(el, { theme: getTheme(), darkMode })
 }
 
diff --git a/assets/scss/pages/single/_toc.scss b/assets/scss/pages/single/_toc.scss
index c4c20752..dcc812c7 100644
--- a/assets/scss/pages/single/_toc.scss
+++ b/assets/scss/pages/single/_toc.scss
@@ -122,7 +122,7 @@
   .toc-content {
     overflow-y: auto;
     overscroll-behavior: contain;
-    max-height: fi-var(toc-content-max-height, calc(100dvh - #{2 * #{fi-var(header-height)}}));
+    max-height: fi-var(toc-content-max-height, 90dvh);
     @include scrollbar-width(none, 0);
 
     &.always-active ul,
diff --git a/assets/scss/pages/single/shortcodes/_mermaid.scss b/assets/scss/pages/single/shortcodes/_mermaid.scss
index ba9cacdf..6088c5a1 100644
--- a/assets/scss/pages/single/shortcodes/_mermaid.scss
+++ b/assets/scss/pages/single/shortcodes/_mermaid.scss
@@ -46,6 +46,10 @@
 }
 
 .diagram-tabs {
+  :is(.mermaid, .mermaid-dark)[data-processed] svg {
+    will-change: transform;
+  }
+
   .tabs-actions .fullscreen-btn {
     position: relative;
     margin-inline-start: 4px;