From 1f0a84a24bd5fbce9d32a73d11c75bdcb2aa71f1 Mon Sep 17 00:00:00 2001
From: L0kayata <haoyx71@protonmail.com>
Date: Fri, 27 Mar 2026 12:27:59 +0100
Subject: [PATCH] fix: Lock carousel caption area to measured max height

Measure caption heights across slides at runtime and apply a shared min-height so switching between slides with and without caption text does not cause layout jump.

Keep this behavior scoped to carousels with captions and recalculate on load and resize for responsive stability.
---
 layouts/shortcodes/carousel.html | 33 ++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 55cf6878..2e220aa7 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -147,3 +147,36 @@
     >
   </button>
 </div>
+
+  {{ if $captionsParam }}
+  <script>
+    (() => {
+      const root = document.getElementById("{{ $id }}");
+      if (!root) return;
+
+      const items = Array.from(root.querySelectorAll("[data-twe-carousel-item]"));
+      const captions = items
+        .map((item) => item.querySelector("figcaption"))
+        .filter((caption) => caption);
+      if (captions.length < 2) return;
+
+      const measureAndFixCaptionHeight = () => {
+        const hiddenItems = items.filter((item) => item.classList.contains("hidden"));
+        hiddenItems.forEach((item) => item.classList.remove("hidden"));
+
+        const maxHeight = Math.max(
+          ...captions.map((caption) => Math.ceil(caption.getBoundingClientRect().height)),
+        );
+
+        hiddenItems.forEach((item) => item.classList.add("hidden"));
+        captions.forEach((caption) => {
+          caption.style.minHeight = `${maxHeight}px`;
+        });
+      };
+
+      window.requestAnimationFrame(measureAndFixCaptionHeight);
+      window.addEventListener("load", measureAndFixCaptionHeight, { once: true });
+      window.addEventListener("resize", measureAndFixCaptionHeight);
+    })();
+  </script>
+  {{ end }}