From 69b62b6af33091cdf4244a0314f123fcf6aa7cfd Mon Sep 17 00:00:00 2001
From: Igor Barcik <igor1606553@gmail.com>
Date: Wed, 13 May 2026 13:17:55 +0200
Subject: [PATCH] feat(ui): add close button to modal dialogs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add × button to modal overlays for better UX. Button is positioned
in top-right corner with hover effects and proper styling.
---
 public/index.html | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index ca71948..ef3a645 100644
--- a/public/index.html
+++ b/public/index.html
@@ -229,10 +229,33 @@
         width: 100%;
         max-height: 90vh;
         overflow-y: auto;
+        position: relative;
+      }
+      .modal-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 32px;
+        height: 32px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        color: var(--muted);
+        font-size: 20px;
+        cursor: pointer;
+        border-radius: 8px;
+        transition: all 0.15s;
+      }
+      .modal-close:hover {
+        background: var(--surface2);
+        color: var(--text);
       }
       .modal h2 {
         font-size: 20px;
         margin-bottom: 24px;
+        padding-right: 40px;
       }
 
       /* Form */
@@ -781,8 +804,11 @@
 
       function openModal(html) {
         document.getElementById("modal-container").innerHTML = `
-    <div class="modal-overlay" onclick="if(event.target === this) closeModal()">
-      <div class="modal">${html}</div>
+    <div class="modal-overlay">
+      <div class="modal">
+        <button class="modal-close" onclick="closeModal()">✕</button>
+        ${html}
+      </div>
     </div>`;
         document.body.style.overflow = "hidden";
       }