feat(settings): compact spacing pass + row hover affordance (#223)

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>
This commit is contained in:
Frank Stellmacher
2026-04-20 22:58:19 +02:00
committed by GitHub
parent 2d3be10c8f
commit f510223d2d
+12 -5
View File
@@ -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 ─ */