From 7ab94a14d0a5cb418dfca0961db68d5412677220 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Mon, 1 Jun 2026 23:57:17 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20add=20=C3=97=20close=20button=20to=20im?=
 =?UTF-8?q?age=20lightbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added visible close button (×) top-right of image overlay
- Image clicks no longer propagate (prevents accidental close)
- Overlay background click still closes
---
 templates/event_expenses.html | 3 ++-
 templates/expense_list.html   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/templates/event_expenses.html b/templates/event_expenses.html
index edb1d73..acb30fa 100644
--- a/templates/event_expenses.html
+++ b/templates/event_expenses.html
@@ -59,7 +59,8 @@
                     {{if .ImagePath}}
                     <div id="img-{{.ID}}" class="hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999; align-items: center; justify-content: center; cursor: pointer; padding: 1rem;"
                          onclick="this.classList.add('hidden')">
-                        <img src="/storage/{{.ImagePath}}" alt="Receipt" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.5rem;">
+                        <span style="position: absolute; top: 1rem; right: 1rem; font-size: 2rem; color: #fff; line-height: 1; cursor: pointer; z-index: 1000;">&times;</span>
+                        <img src="/storage/{{.ImagePath}}" alt="Receipt" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.5rem;" onclick="event.stopPropagation()">
                     </div>
                     {{end}}
                     {{end}}
diff --git a/templates/expense_list.html b/templates/expense_list.html
index 0bebf1d..7c14866 100644
--- a/templates/expense_list.html
+++ b/templates/expense_list.html
@@ -47,7 +47,8 @@
             {{if .ImagePath}}
             <div id="img-{{.ID}}" class="hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999; align-items: center; justify-content: center; cursor: pointer; padding: 1rem;"
                  onclick="this.classList.add('hidden')">
-                <img src="/storage/{{.ImagePath}}" alt="Receipt" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.5rem;">
+                <span style="position: absolute; top: 1rem; right: 1rem; font-size: 2rem; color: #fff; line-height: 1; cursor: pointer; z-index: 1000;">&times;</span>
+                <img src="/storage/{{.ImagePath}}" alt="Receipt" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.5rem;" onclick="event.stopPropagation()">
             </div>
             {{end}}
         </div>