ui: sidebar bands on one 8px rhythm (owner round 11)

The stack read 12/6/4/4/14 — the search→filter seam was the tightest
gap in the column and the filter→list seam 3.5× larger (its mb-1.5
stacked with the list's 8px top padding). One rhythm now: mb-2 on the
create block, the Sessions+search row, and the filter; the list's p-2
top padding IS the rhythm. The 6px inside the create block stays —
intra-group spacing, a different layer.
This commit is contained in:
amosblomqvist
2026-10-05 07:05:45 +03:00
parent d0bb3da7b8
commit b8c1b9b096
+3 -3
View File
@@ -700,7 +700,7 @@ function SessionsSidebar() {
half/half row): full-width rows read cleaner and give the half/half row): full-width rows read cleaner and give the
labels room; teaching keeps the original draft route, labels room; teaching keeps the original draft route,
practice carries its mode. */} practice carries its mode. */}
<div className="mx-3 mb-1 flex flex-col gap-1.5"> <div className="mx-3 mb-2 flex flex-col gap-1.5">
<button <button
type="button" type="button"
data-testid="new-session" data-testid="new-session"
@@ -723,7 +723,7 @@ function SessionsSidebar() {
</button> </button>
</div> </div>
<div className="mx-3 mb-1 flex items-center gap-2"> <div className="mx-3 mb-2 flex items-center gap-2">
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span> <span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
<Hint label="Search sessions" action="sessions-search" side="bottom"> <Hint label="Search sessions" action="sessions-search" side="bottom">
<span className="relative flex-1"> <span className="relative flex-1">
@@ -757,7 +757,7 @@ function SessionsSidebar() {
Practice / All — the real modes first, "All" as the escape Practice / All — the real modes first, "All" as the escape
hatch on the right, mirroring the create-buttons above. hatch on the right, mirroring the create-buttons above.
Persisted client-side. */} Persisted client-side. */}
<div className="mx-3 mb-1.5 flex items-center gap-0.5 rounded-md border border-border/60 bg-background p-0.5" data-testid="session-kind-filter"> <div className="mx-3 mb-2 flex items-center gap-0.5 rounded-md border border-border/60 bg-background p-0.5" data-testid="session-kind-filter">
{(["teach", "practice", "all"] as const).map((f) => ( {(["teach", "practice", "all"] as const).map((f) => (
<button <button
key={f} key={f}