From a44b7848dde07f3b9e9ec123242030b6388eb974 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 10 Feb 2026 20:29:38 +0000
Subject: [PATCH] Fix lightbox: close when clicking outside the photo itself

Move stopPropagation from the outer container to the image
element only, so clicking dark space around the photo closes
the lightbox.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/page.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f6942a6..6ad847a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -258,11 +258,11 @@ function GallerySection() {
               <line x1="6" y1="6" x2="18" y2="18"/>
             </svg>
           </button>
-          <div
-            className="relative w-full h-full max-w-6xl max-h-[85vh] flex flex-col items-center justify-center"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="relative w-full flex-1 min-h-0">
+          <div className="relative w-full h-full max-w-6xl max-h-[85vh] flex flex-col items-center justify-center">
+            <div
+              className="relative w-full flex-1 min-h-0"
+              onClick={(e) => e.stopPropagation()}
+            >
               <Image
                 src={selectedArtwork.src}
                 alt={selectedArtwork.title}
@@ -271,7 +271,10 @@ function GallerySection() {
                 sizes="(max-width: 768px) 100vw, 90vw"
               />
             </div>
-            <p className="text-white/80 font-sans-alt text-sm tracking-widest mt-4 text-center">
+            <p
+              className="text-white/80 font-sans-alt text-sm tracking-widest mt-4 text-center"
+              onClick={(e) => e.stopPropagation()}
+            >
               {selectedArtwork.title}
             </p>
           </div>