Centered settings modal

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%;
+}

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');
     }
 }