From 877a2609e911c0faeec583435730471372bad48c Mon Sep 17 00:00:00 2001
From: L0kayata <haoyx71@protonmail.com>
Date: Fri, 27 Mar 2026 12:27:21 +0100
Subject: [PATCH] fix: Fix carousel caption flow and scope controls to image
 bounds

Move carousel captions out of absolute positioning so they participate in normal height calculation and no longer overlap content below the carousel.

Constrain indicators and navigation buttons to the image region using container-based sizing, so controls do not extend into the caption area.
---
 layouts/shortcodes/carousel.html | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 55e69358..55cf6878 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -39,11 +39,13 @@
 <div
   id="{{ $id }}"
   class="relative"
+  style="container-type: inline-size;"
   data-twe-carousel-init
   data-twe-ride="carousel"
   data-twe-interval="{{ $interval }}">
   <div
-    class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
+    class="absolute right-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
+    style="top: calc(100cqi * {{ $aspecty }} / {{ $aspectx }} - 2.5rem);"
     data-twe-carousel-indicators>
     {{ $num := 0 }}
     {{ range $images }}
@@ -89,18 +91,19 @@
             class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
             alt="carousel image {{ add $index 1 }}">
         </div>
-        {{ if $caption }}
+        {{ if or $caption $captionsParam }}
         <figcaption
-          class="absolute left-0 right-0"
-          style="top: calc(100%);"
-        >{{ $caption | markdownify }}</figcaption>
+          class="mt-1 {{ if not $caption }}invisible{{ end }}"
+          {{ if not $caption }}aria-hidden="true"{{ end }}
+        >{{ if $caption }}{{ $caption | markdownify }}{{ else }}&nbsp;{{ end }}</figcaption>
         {{ end }}
     </div>
     {{ end }}
   </div>
 
   <button
-    class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    class="absolute top-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    style="height: calc(100cqi * {{ $aspecty }} / {{ $aspectx }});"
     type="button"
     data-twe-target="#{{ $id }}"
     data-twe-slide="prev">
@@ -122,7 +125,8 @@
   </button>
 
   <button
-    class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    class="absolute top-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    style="height: calc(100cqi * {{ $aspecty }} / {{ $aspectx }});"
     type="button"
     data-twe-target="#{{ $id }}"
     data-twe-slide="next">