From 61e3bd69ffe2b5e8d15772467c1f31e8f453b103 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 8 Jan 2026 23:19:44 -0500
Subject: [PATCH] Centered settings modal

---
 assets/css/dashboard.css | 20 ++++++++++++++++----
 assets/js/settings.js    |  4 +++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
index e47213d..f5b9ab9 100644
--- a/assets/css/dashboard.css
+++ b/assets/css/dashboard.css
@@ -2405,14 +2405,16 @@ body.dark-mode select option {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     z-index: 10000;
     background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(5px);
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 1rem;
+    overflow-y: auto;
 }
 
 .settings-content {
@@ -2421,12 +2423,14 @@ body.dark-mode select option {
     border: 2px solid var(--terminal-green);
     box-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
     max-width: 800px;
-    width: 90%;
-    max-height: 90vh;
+    width: 100%;
+    max-height: 85vh;
     overflow-y: auto;
+    overflow-x: hidden;
     font-family: var(--font-mono);
     padding: 2rem;
     animation: settingsSlideIn 0.3s ease;
+    margin: auto;
 }
 
 @keyframes settingsSlideIn {
@@ -2678,3 +2682,11 @@ body.dark-mode select option {
         grid-template-columns: 1fr;
     }
 }
+
+/* Prevent body scroll when modal is open */
+body.modal-open {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
diff --git a/assets/js/settings.js b/assets/js/settings.js
index 63a5c87..de5e667 100644
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -110,7 +110,8 @@ async function saveSettings() {
 function openSettingsModal() {
     const modal = document.getElementById('settingsModal');
     if (modal) {
-        modal.style.display = 'block';
+        modal.style.display = 'flex';
+        document.body.classList.add('modal-open');
         loadUserPreferences();
     }
 }
@@ -119,6 +120,7 @@ function closeSettingsModal() {
     const modal = document.getElementById('settingsModal');
     if (modal) {
         modal.style.display = 'none';
+        document.body.classList.remove('modal-open');
     }
 }