From b1dd57da8200573442d9ab7d6a9391202be8a309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Sat, 10 Jan 2026 00:53:26 +0100
Subject: [PATCH] Fix settings style

---
 src/main/resources/static/css/styles.css   | 30 +++-----
 src/main/resources/templates/settings.html | 80 ++++++++++------------
 2 files changed, 45 insertions(+), 65 deletions(-)

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index bc7bc39..c5df6d2 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -81,7 +81,7 @@ body {
 
 .channels-shell,
 .settings-shell {
-    width: min(760px, 100%);
+    width: 100%;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -110,6 +110,8 @@ body {
 .settings-main {
     display: flex;
     justify-content: center;
+    flex-direction: column;
+    gap: 14px;
 }
 
 .error-main {
@@ -204,23 +206,15 @@ body {
 }
 
 .settings-hero {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 20px;
-    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 }
 
-.settings-layout {
-    display: grid;
-    grid-template-columns: 2fr minmax(260px, 1fr);
+.settings-stack {
+    display: flex;
+    flex-direction: column;
     gap: 18px;
-    align-items: start;
-}
-
-@media (max-width: 900px) {
-    .settings-layout {
-        grid-template-columns: 1fr;
-    }
 }
 
 .settings-panel {
@@ -229,12 +223,6 @@ body {
     gap: 18px;
 }
 
-.settings-sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-}
-
 .hero-copy h1 {
     margin: 8px 0 6px;
 }
diff --git a/src/main/resources/templates/settings.html b/src/main/resources/templates/settings.html
index e78e536..8279c70 100644
--- a/src/main/resources/templates/settings.html
+++ b/src/main/resources/templates/settings.html
@@ -39,11 +39,6 @@
                             Configure overlay performance and audio guardrails for every channel using Imgfloat. These
                             settings are applied globally.
                         </p>
-                        <div class="badge-row">
-                            <span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
-                            <span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
-                            <span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
-                        </div>
                     </div>
                     <div class="stat-grid compact">
                         <div class="stat">
@@ -69,7 +64,7 @@
                     </div>
                 </section>
 
-                <div class="settings-layout">
+                <div class="settings-stack">
                     <section class="settings-card settings-panel">
                         <div class="section-heading">
                             <div>
@@ -236,50 +231,47 @@
                                 </button>
                             </div>
                         </form>
+                    </section>
 
-                        <div class="form-section">
-                            <div class="form-heading">
-                                <p class="eyebrow subtle">Access</p>
-                                <h3>System administrators</h3>
-                                <p class="muted tiny">
-                                    Invite teammates who can manage global defaults and other system-wide actions.
-                                </p>
-                            </div>
-                            <div class="inline-form">
-                                <input id="new-sysadmin" placeholder="Twitch username" />
-                                <button id="add-sysadmin-button" class="button" type="button">Add system admin</button>
-                            </div>
-                            <div class="card-section">
-                                <div class="section-header">
-                                    <h4 class="list-title">Current system admins</h4>
-                                    <p class="muted">These users can access the settings page and APIs.</p>
-                                </div>
-                                <ul id="sysadmin-list" class="stacked-list"></ul>
+                    <section class="settings-card">
+                        <div class="form-heading">
+                            <p class="eyebrow subtle">Access</p>
+                            <h3>System administrators</h3>
+                            <p class="muted tiny">
+                                Invite teammates who can manage global defaults and other system-wide actions.
+                            </p>
+                        </div>
+                        <div class="inline-form">
+                            <input id="new-sysadmin" placeholder="Twitch username" />
+                            <button id="add-sysadmin-button" class="button" type="button">Add system admin</button>
+                        </div>
+                        <div class="card-section">
+                            <div class="section-header">
+                                <h4 class="list-title">Current system admins</h4>
+                                <p class="muted">These users can access the settings page and APIs.</p>
                             </div>
+                            <ul id="sysadmin-list" class="stacked-list"></ul>
                         </div>
                     </section>
 
-                    <aside class="settings-sidebar">
-                        <section class="settings-card info-card">
-                            <p class="eyebrow subtle">Checklist</p>
-                            <h3>Before you save</h3>
-                            <ul class="hint-list">
-                                <li>Match canvas dimensions to the OBS browser source you embed.</li>
-                                <li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
-                                <li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
-                                <li>Lower the minimum volume if alerts feel too loud on stream.</li>
-                            </ul>
-                        </section>
+                    <section class="settings-card info-card">
+                        <p class="eyebrow subtle">Checklist</p>
+                        <h3>Before you save</h3>
+                        <ul class="hint-list">
+                            <li>Match canvas dimensions to the OBS browser source you embed.</li>
+                            <li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
+                            <li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
+                            <li>Lower the minimum volume if alerts feel too loud on stream.</li>
+                        </ul>
+                    </section>
 
-                        <section class="settings-card info-card subtle">
-                            <p class="eyebrow subtle">Heads up</p>
-                            <h3>Global impact</h3>
-                            <p class="muted tiny">
-                                Changes here update every channel immediately. Save carefully and confirm with your
-                                team.
-                            </p>
-                        </section>
-                    </aside>
+                    <section class="settings-card info-card subtle">
+                        <p class="eyebrow subtle">Heads up</p>
+                        <h3>Global impact</h3>
+                        <p class="muted tiny">
+                            Changes here update every channel immediately. Save carefully and confirm with your team.
+                        </p>
+                    </section>
                 </div>
             </main>
         </div>