From 873c1535255fa46e936c6a04bdc067133e5e5c77 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Mon, 14 Sep 2026 10:21:56 +0300
Subject: [PATCH] =?UTF-8?q?Stats=20bar=20round=204=20(owner):=20optical=20?=
 =?UTF-8?q?spacing=20=E2=80=94=20tight=20to=20the=20composer,=20floating?=
 =?UTF-8?q?=20below?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rhythm agreed with the owner: the stats/controls row hugs the
composer (8px — reads as the card's metadata, one object), and the
whole cluster floats with deliberate air above the screen bottom
(20px). The 8px straight-edge gap optically matches the 6px pill-to-
pill gap: two rounded pills' corridor reads wider than geometric, so
rounded-rounded gaps run ~2px tighter than straight-edge gaps.

- stats-bar.tsx: pt-4 -> pt-2 (8px under the composer) — shared by
  chat and home automatically
- chat.tsx dock block + home.tsx composer wrapper: pb-4 -> pb-5

The dock's reserve auto-measures the block, so the spacer/fold
machinery adapts on its own.
---
 components/chat.tsx      | 2 +-
 components/home.tsx      | 2 +-
 components/stats-bar.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index b25bccc..44396b7 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -921,7 +921,7 @@ function DockOverlay({
 	return (
 		<div className="pointer-events-none absolute inset-x-0 bottom-0" style={{ right: sbInset }}>
 			<div className="h-24 bg-gradient-to-t from-background via-background/85 to-transparent" />
-			<div ref={blockRef} className="bg-background pb-4">
+			<div ref={blockRef} className="bg-background pb-5">
 				<div className={DOCK}>
 					<div ref={shellRef} className="pointer-events-auto overflow-hidden rounded-2xl border bg-card shadow-lg">
 						<div key={mode} className={mode === initialModeRef.current ? undefined : "dock-variant"}>
diff --git a/components/home.tsx b/components/home.tsx
index 189451f..a86300e 100644
--- a/components/home.tsx
+++ b/components/home.tsx
@@ -69,7 +69,7 @@ export function Home() {
 			    OVER the graph (no gradient: the graph runs clean under it to the
 			    bottom edge). Matches chat.tsx's DOCK geometry (max-w-[46rem]
 			    px-4) so nothing shifts when a session starts (owner). */}
-			<div className="pointer-events-none absolute inset-x-0 bottom-0 pb-4">
+			<div className="pointer-events-none absolute inset-x-0 bottom-0 pb-5">
 				<div className="pointer-events-auto mx-auto w-full max-w-[46rem] px-4">
 					<form
 						className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
diff --git a/components/stats-bar.tsx b/components/stats-bar.tsx
index ea235bf..749d2f9 100644
--- a/components/stats-bar.tsx
+++ b/components/stats-bar.tsx
@@ -66,7 +66,7 @@ export function StatsBar({
 			// (so its transparent gradient area never blocks scrolling) — this row
 			// must re-enable events or every control on it is dead (the model-
 			// control wave caught this live: buttons rendered, clicks never landed).
-			className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-4 text-xs text-muted-foreground"
+			className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-2 text-xs text-muted-foreground"
 		>
 			{/* The summary button + its popover: the popover anchors to this
 			    wrapper, CENTERED over the button itself (owner, stats round 2)