Fix settings style

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

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,8 +231,9 @@
                                 </button>
                             </div>
                         </form>
+                    </section>
 
-                        <div class="form-section">
+                    <section class="settings-card">
                         <div class="form-heading">
                             <p class="eyebrow subtle">Access</p>
                             <h3>System administrators</h3>
@@ -256,10 +252,8 @@
                             </div>
                             <ul id="sysadmin-list" class="stacked-list"></ul>
                         </div>
-                        </div>
                     </section>
 
-                    <aside class="settings-sidebar">
                     <section class="settings-card info-card">
                         <p class="eyebrow subtle">Checklist</p>
                         <h3>Before you save</h3>
@@ -275,11 +269,9 @@
                         <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.
+                            Changes here update every channel immediately. Save carefully and confirm with your team.
                         </p>
                     </section>
-                    </aside>
                 </div>
             </main>
         </div>