From 814cba1f53287763f19683ec767989dec9eb96a9 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Mon, 1 Jun 2026 23:35:35 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20image=20lightbox=20overlay=20hidden=20no?=
 =?UTF-8?q?t=20working=20=E2=80=94=20display:flex=20overrode=20hidden=20cl?=
 =?UTF-8?q?ass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed display:flex from inline style so the hidden class can apply display:none
- All image modals were visible and stacked on top of the page content
- This also blocked event creation (the transparent overlay covered the form)
---
 templates/event_expenses.html | 2 +-
 templates/expense_list.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/event_expenses.html b/templates/event_expenses.html
index 6f616b5..edb1d73 100644
--- a/templates/event_expenses.html
+++ b/templates/event_expenses.html
@@ -57,7 +57,7 @@
                         </div>
                     </div>
                     {{if .ImagePath}}
-                    <div id="img-{{.ID}}" class="hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 1rem;"
+                    <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;">
                     </div>
diff --git a/templates/expense_list.html b/templates/expense_list.html
index 6716d27..0bebf1d 100644
--- a/templates/expense_list.html
+++ b/templates/expense_list.html
@@ -45,7 +45,7 @@
                 </button>
             </div>
             {{if .ImagePath}}
-            <div id="img-{{.ID}}" class="hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 1rem;"
+            <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;">
             </div>