diff --git a/css/style.css b/css/style.css index b690a6f..6db442d 100644 --- a/css/style.css +++ b/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 { display: flex; gap: 4px; padding: 0 16px 8px; flex-wrap: wrap; } -.settings-tab { - flex: 1; min-width: 70px; padding: 6px 10px; font-size: 12px; cursor: pointer; - color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border); - border-radius: 6px; +/* Settings tabs — vertical column on the left; JS toggles .is-tab-hidden. */ +.settings-main { display: flex; flex: 1; min-height: 0; } +.settings-tabs { + display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; + flex: 0 0 auto; border-right: 1px solid var(--border); overflow-y: auto; } -.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. */ diff --git a/index.html b/index.html index 014011f..896b77b 100644 --- a/index.html +++ b/index.html @@ -413,6 +413,7 @@ +
@@ -865,6 +866,7 @@
+