From 424a4f5377823b8bc55d4d9427ad6914dbd08c49 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Mon, 30 Mar 2026 03:27:47 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20settings=20modal=20dismiss=20=E2=80=94?=
 =?UTF-8?q?=20add=20close=20button,=20fix=20backdrop=20click?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 muxplex/frontend/app.js             |  1 +
 muxplex/frontend/index.html         |  4 +++
 muxplex/frontend/style.css          | 38 ++++++++++++++++++++++++++++-
 muxplex/tests/test_frontend_html.py | 14 +++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index d7c2232..1d390a0 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -1444,6 +1444,7 @@ function bindStaticEventListeners() {
   // Settings dialog bindings
   on($('settings-btn'), 'click', openSettings);
   on($('settings-btn-expanded'), 'click', openSettings);
+  on($('settings-close-btn'), 'click', closeSettings);
   on($('settings-backdrop'), 'click', closeSettings);
   const settingsDialog = $('settings-dialog');
   if (settingsDialog) settingsDialog.addEventListener('cancel', closeSettings);
diff --git a/muxplex/frontend/index.html b/muxplex/frontend/index.html
index 55ec634..56ca3fb 100644
--- a/muxplex/frontend/index.html
+++ b/muxplex/frontend/index.html
@@ -78,6 +78,10 @@
   <!-- ── Settings ─────────────────────────────────────────────────────────────────────── -->
   <div id="settings-backdrop" class="settings-backdrop hidden"></div>
   <dialog id="settings-dialog" class="settings-dialog">
+    <div class="settings-dialog-header">
+      <h2 class="settings-dialog-title">Settings</h2>
+      <button id="settings-close-btn" class="settings-close-btn" aria-label="Close settings">&times;</button>
+    </div>
     <div class="settings-layout">
       <nav class="settings-tabs">
         <button class="settings-tab settings-tab--active" data-tab="display">Display</button>
diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css
index f986d94..4cc7a3f 100644
--- a/muxplex/frontend/style.css
+++ b/muxplex/frontend/style.css
@@ -934,15 +934,51 @@ body {
   padding: 0;
   overflow: hidden;
   margin: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .settings-dialog::backdrop {
   background: transparent;
+  pointer-events: none;  /* let clicks fall through to #settings-backdrop */
+}
+
+.settings-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.settings-dialog-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.settings-close-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  line-height: 1;
+}
+
+.settings-close-btn:hover {
+  color: var(--text);
+  background: var(--bg-surface);
 }
 
 .settings-layout {
   display: flex;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 .settings-tabs {
diff --git a/muxplex/tests/test_frontend_html.py b/muxplex/tests/test_frontend_html.py
index 8b8b672..007b045 100644
--- a/muxplex/tests/test_frontend_html.py
+++ b/muxplex/tests/test_frontend_html.py
@@ -1048,3 +1048,17 @@ def test_html_new_session_tab_controls() -> None:
     soup = _SOUP
     for id_ in ("setting-template", "setting-template-reset"):
         assert soup.find(id=id_), f"Missing element with id='{id_}'"
+
+
+def test_html_settings_close_btn_exists() -> None:
+    """settings-dialog must contain a #settings-close-btn button to dismiss the modal."""
+    soup = _SOUP
+    close_btn = soup.find(id="settings-close-btn")
+    assert close_btn is not None, "Missing #settings-close-btn inside settings dialog"
+    # Must be inside the settings dialog
+    dialog = soup.find(id="settings-dialog")
+    assert dialog is not None, "Missing #settings-dialog"
+    # Verify close button is a descendant of the dialog
+    assert dialog.find(id="settings-close-btn") is not None, (
+        "#settings-close-btn must be a descendant of #settings-dialog"
+    )