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.
This commit is contained in:
L0kayata
2026-03-27 12:27:59 +01:00
parent 877a2609e9
commit 1f0a84a24b
+33
View File
@@ -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 }}