From 86d88aa3df8cb0c1c31db8a4ace5384e95268b3c Mon Sep 17 00:00:00 2001
From: priestlypython <andre@optinampout.com>
Date: Wed, 14 Jan 2026 11:01:53 -0800
Subject: [PATCH] fix: Improve modal event binding and close button
 functionality

- Remove inline onclick attribute from close button
- Add ID-based event listener binding in DOMContentLoaded
- Add preventDefault and stopPropagation to close handler
- Add console logging for debugging
- Add null checks for modal elements
---
 static/js/detail-modal.js | 29 ++++++++++++++++++++++-------
 templates/index.html      |  2 +-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/static/js/detail-modal.js b/static/js/detail-modal.js
index ae60278..7a5d499 100644
--- a/static/js/detail-modal.js
+++ b/static/js/detail-modal.js
@@ -207,22 +207,37 @@ function closeDetailModal() {
     modal.classList.remove('active');
 }
 
-// Close modal when clicking outside
+// Initialize modal event listeners
 document.addEventListener('DOMContentLoaded', () => {
     const modal = document.getElementById('detail-modal');
+    const closeBtn = document.getElementById('modal-close-btn');
 
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
+    // Close button click
+    if (closeBtn) {
+        closeBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
             closeDetailModal();
-        }
-    });
+        });
+    }
 
-    // Close on escape key
+    // Click outside modal
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeDetailModal();
+            }
+        });
+    }
+
+    // Escape key
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && modal.classList.contains('active')) {
+        if (e.key === 'Escape' && modal && modal.classList.contains('active')) {
             closeDetailModal();
         }
     });
+
+    console.log('Detail modal initialized');
 });
 
 // Export for use in other modules
diff --git a/templates/index.html b/templates/index.html
index fbe1c52..8075e4e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -261,7 +261,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2>Capture Details</h2>
-                <button class="modal-close" onclick="closeDetailModal()">&times;</button>
+                <button id="modal-close-btn" class="modal-close">&times;</button>
             </div>
             <div class="modal-body" id="modal-body-content">
                 <!-- Content loaded dynamically -->