From 62ad5a9cd951c5f1529fe37ac5e4774bce187dc9 Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Sun, 9 Nov 2025 15:07:04 -0800
Subject: [PATCH] adjust settings page flow

---
 webui/index.html       | 4 ++++
 webui/static/style.css | 7 ++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index ea3c8f1a..e909b289 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -1541,6 +1541,7 @@
             <div class="page" id="settings-page">
                 <div class="page-header">
                     <h2>Settings</h2>
+                    <button class="save-button" onclick="document.getElementById('save-settings').click()">💾 Save Settings</button>
                 </div>
                 <div class="settings-content">
                     <!-- Two Column Layout -->
@@ -1883,7 +1884,10 @@
                                     Set MIN to 0 to accept all file sizes (recommended for most users).
                                 </div>
                             </div>
+                        </div>
 
+                        <!-- Third Column - Database, Metadata, Playlist Sync, Logging -->
+                        <div class="settings-third-column">
                             <!-- Database Settings -->
                             <div class="settings-group">
                                 <h3>Database Settings</h3>
diff --git a/webui/static/style.css b/webui/static/style.css
index eb686300..14d6c506 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -1001,9 +1001,9 @@ body {
     font-weight: 500;
 }
 
-/* Settings Page Styling - Two Column Layout */
+/* Settings Page Styling - Three Column Layout */
 .settings-content {
-    max-width: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -1014,8 +1014,9 @@ body {
     margin-bottom: 32px;
 }
 
-.settings-left-column, .settings-right-column {
+.settings-left-column, .settings-right-column, .settings-third-column {
     flex: 1;
+    min-width: 380px;
     display: flex;
     flex-direction: column;
     gap: 18px;