From 3ac7e9c549ad81840b6cf815a3271cd82bfe3ec9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 11 Apr 2026 18:37:33 +0200
Subject: [PATCH] fix: lightbox chrome z-index and layout alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: media container was position:absolute inset-0 but without
z-index, while buttons had no z-index either — in fill mode the image
painted over the buttons making close/fill-toggle unclickable.

Fixes:
- Media div is now absolute inset-0 (explicit), chrome bars are z-10
- Top bar is a single flex row (h-14): left spacer | counter | FILL+✕
  so counter, fill toggle and close are vertically aligned at the same
  height instead of scattered absolute elements
- Bottom bar is a flex row (h-14) centred over dots
- Both bars have a linear-gradient scrim so chrome stays legible over
  fill-mode images without a solid background
- Prev/Next arrows get z-10 so they always sit above the media
- Media padding uses pt-14 pb-14 in fit mode to clear the chrome bars

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/posts/single.html | 74 ++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index fe10eb6..62fd1fa 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -169,43 +169,46 @@
         aria-modal="true"
         aria-label="Media lightbox"
       >
-        <!-- Gradient accent line top -->
-        <div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
+        <!-- ── Top chrome bar ── -->
+        <div class="absolute top-0 inset-x-0 z-10 flex items-center justify-between px-2 h-14"
+          style="background: linear-gradient(to bottom, rgba(5,5,16,0.85), transparent)">
+          <!-- gradient accent -->
+          <div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
+          <!-- left spacer (mirrors right buttons width) -->
+          <div class="w-24"></div>
+          <!-- counter centred -->
+          <div class="label text-fog tabular-nums"
+            x-text="`${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}`"></div>
+          <!-- right actions: fill toggle + close -->
+          <div class="flex items-center w-24 justify-end gap-1">
+            <button
+              @click="fill = !fill"
+              class="w-10 h-10 flex items-center justify-center label transition-colors"
+              :class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
+              :aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
+              x-text="fill ? 'FIT' : 'FILL'"
+            ></button>
+            <button
+              @click="close()"
+              class="w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
+              aria-label="Close"
+            >✕</button>
+          </div>
+        </div>
 
-        <!-- Counter -->
-        <div class="absolute top-5 left-1/2 -translate-x-1/2 label text-fog tabular-nums"
-          x-text="`${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}`"></div>
-
-        <!-- Fill / Fit toggle -->
-        <button
-          @click="fill = !fill"
-          class="absolute top-3 right-16 w-10 h-10 flex items-center justify-center label transition-colors"
-          :class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
-          :aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
-          x-text="fill ? 'FIT' : 'FILL'"
-        ></button>
-
-        <!-- Close -->
-        <button
-          @click="close()"
-          class="absolute top-3 right-4 w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
-          aria-label="Close"
-        >✕</button>
-
-        <!-- Prev -->
+        <!-- ── Prev ── -->
         <button
           @click="prev()"
           x-show="items.length > 1"
-          class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
+          class="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
           aria-label="Previous"
         >{{ partial "icon.html" "arrow-left" }}</button>
 
-        <!-- Media -->
+        <!-- ── Media ── -->
         <div
-          class="w-full h-full flex items-center justify-center transition-all duration-300"
-          :class="fill ? 'p-0' : 'px-14 md:px-20 py-14'"
+          class="absolute inset-0 flex items-center justify-center transition-[padding] duration-300"
+          :class="fill ? 'p-0' : 'pt-14 pb-14 px-14 md:px-20'"
         >
-          <!-- Video -->
           <video
             x-show="items[idx] && items[idx].video"
             :src="items[idx] && items[idx].video ? items[idx].video : ''"
@@ -215,7 +218,6 @@
             class="transition-all duration-300"
             controls loop muted playsinline
           ></video>
-          <!-- Image -->
           <img
             x-show="items[idx] && !items[idx].video"
             :src="items[idx] && !items[idx].video ? items[idx].img : ''"
@@ -225,16 +227,19 @@
           >
         </div>
 
-        <!-- Next -->
+        <!-- ── Next ── -->
         <button
           @click="next()"
           x-show="items.length > 1"
-          class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
+          class="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
           aria-label="Next"
         >{{ partial "icon.html" "arrow-right" }}</button>
 
-        <!-- Dot indicators -->
-        <div x-show="items.length > 1" class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2">
+        <!-- ── Bottom chrome bar (dots) ── -->
+        <div x-show="items.length > 1"
+          class="absolute bottom-0 inset-x-0 z-10 flex items-center justify-center h-14 gap-2"
+          style="background: linear-gradient(to top, rgba(5,5,16,0.85), transparent)">
+          <div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
           <template x-for="(item, i) in items" :key="i">
             <button
               @click="idx = i"
@@ -244,9 +249,6 @@
             ></button>
           </template>
         </div>
-
-        <!-- Gradient accent line bottom -->
-        <div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
       </div>
     </template>