From af4cc2ae483fca34f36c03be6d65d3b11a33f64a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 19 Feb 2026 18:16:34 +0100
Subject: [PATCH] fix(lightbox): prevent unintended activation during
 navigation and fix broken images

---
 assets/css/tailwind.css | 2 +-
 default.hbs             | 7 ++++---
 post.hbs                | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 54cede7..a635abc 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -68,7 +68,7 @@ html[data-theme='light'] {
   }
 }
 
-.kg-image-card img, .post-content img {
+.kg-image-card img, .post-content img, .post-feature-image img {
     @apply cursor-pointer transition-opacity duration-200 hover:opacity-90;
 }
 
diff --git a/default.hbs b/default.hbs
index 84be6f6..3c3c743 100644
--- a/default.hbs
+++ b/default.hbs
@@ -29,9 +29,10 @@
 
     <div class="min-h-screen flex flex-col" 
          x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }"
-         @click="if ($event.target.closest('.kg-image-card img, .post-content img')) { 
+         @click="const img = $event.target.closest('.kg-image-card img, .post-content img, .post-feature-image img');
+                 if (img && img.src && !img.closest('a')) { 
                     $event.preventDefault();
-                    lightboxImage = $event.target.src; 
+                    lightboxImage = img.src; 
                     lightboxOpen = true; 
                  }">
         {{> header}}
@@ -50,7 +51,7 @@
             @click="lightboxOpen = false"
             class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
             x-cloak>
-            <button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
+            <button @click.stop="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
             <img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop>
         </div>
     </div>
diff --git a/post.hbs b/post.hbs
index 7cd086f..f12f169 100644
--- a/post.hbs
+++ b/post.hbs
@@ -14,7 +14,7 @@
     </header>
 
     {{#if feature_image}}
-        <figure class="mb-12 rounded-lg overflow-hidden shadow-xl">
+        <figure class="post-feature-image mb-12 rounded-lg overflow-hidden shadow-xl">
             <img
                 class="w-full h-auto object-cover"
                 src="{{img_url feature_image size="xl"}}"