From f510223d2d4a10730c7414e68d6ce833a1cdac25 Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <f.stellmacher@gmail.com>
Date: Mon, 20 Apr 2026 22:58:19 +0200
Subject: [PATCH] feat(settings): compact spacing pass + row hover affordance
 (#223)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tightens the Settings panels globally: section margin-bottom 32→20px,
card padding 20→12px, divider margin 12→8px, section header h2
16→15px. Adds a subtle accent-tinted hover background on every
.settings-toggle-row (extended to card edges via negative
horizontal margin). Vertical row padding kept at 2px so the diet
isn't undone by the hover affordance.

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles/components.css | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/styles/components.css b/src/styles/components.css
index 5d24bf4f..97f93d57 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -2430,7 +2430,7 @@
 }
 
 .settings-section {
-  margin-bottom: var(--space-8);
+  margin-bottom: var(--space-5);
 }
 
 .settings-section-header {
@@ -2438,11 +2438,11 @@
   align-items: center;
   gap: var(--space-2);
   color: var(--accent);
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--space-2);
 }
 
 .settings-section-header h2 {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--text-primary);
 }
@@ -2451,7 +2451,7 @@
   background: var(--bg-card);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
-  padding: var(--space-5);
+  padding: var(--space-3);
 }
 
 .settings-card.user-row {
@@ -2837,12 +2837,19 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-4);
+  padding: 2px var(--space-3);
+  margin: 0 calc(var(--space-3) * -1);
+  border-radius: var(--radius-sm);
+  transition: background 120ms ease;
+}
+.settings-toggle-row:hover {
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
 
 .settings-section-divider {
   border: none;
   border-top: 1px solid var(--border);
-  margin: var(--space-3) 0;
+  margin: var(--space-2) 0;
 }
 
 /* ─ Sidebar Customizer ─ */