style(settings): move tabs to a vertical column on the left

Wrapped the tab bar + body in a .settings-main flex row; tabs now stack
vertically on the left with a right border, body scrolls on the right. JS
unchanged (toggles .is-tab-hidden on sections regardless of layout).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

css/style.css

@@ -2183,14 +2183,18 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
 .settings-search-clear svg { width: 12px; height: 12px; }
 .settings-search-clear:hover { color: var(--text); background: var(--bg-elev-2); }
 .settings-search-wrap.has-query .settings-search-clear { display: inline-flex; }
-/* Settings tabs — group sections; JS toggles .is-tab-hidden. */
+/* Settings tabs — vertical column on the left; JS toggles .is-tab-hidden. */
-.settings-tabs { display: flex; gap: 4px; padding: 0 16px 8px; flex-wrap: wrap; }
+.settings-main { display: flex; flex: 1; min-height: 0; }
-.settings-tab {
+.settings-tabs {
-    flex: 1; min-width: 70px; padding: 6px 10px; font-size: 12px; cursor: pointer;
+    display: flex; flex-direction: column; gap: 4px; padding: 12px 8px;
-    color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border);
+    flex: 0 0 auto; border-right: 1px solid var(--border); overflow-y: auto;
-    border-radius: 6px;
 }
-.settings-tab:hover { background: var(--bg-elev-3); }
+.settings-tab {
+    text-align: left; width: 100%; padding: 7px 12px; font-size: 12px; cursor: pointer;
+    color: var(--text-dim); background: transparent; border: 1px solid transparent;
+    border-radius: 6px; white-space: nowrap;
+}
+.settings-tab:hover { background: var(--bg-elev-2); }
 .settings-tab.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
 .slideover-field.is-tab-hidden { display: none; }
 /* Hidden section + per-row + no-results banner driven by JS. */

index.html

@@ -413,6 +413,7 @@
                 <svg><use href="#i-x"/></svg>
             </button>
         </div>
+        <div class="settings-main">
         <div class="settings-tabs" id="settingsTabs">
             <button class="settings-tab is-active" data-tab="general">Général</button>
             <button class="settings-tab" data-tab="security">Sécurité</button>
@@ -865,6 +866,7 @@
                 </div>
             </div>
         </div>
+        </div>
     </aside>
 
 <!-- ============================================================ -->