From 5dac2a66200a02999d39b94298046b6d91a64f6e Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Mon, 14 Sep 2026 10:10:01 +0300
Subject: [PATCH] Stats bar round 3 (owner): symmetric dropdown closing +
 vertically centered row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The asymmetry: the stats bar's outside-close ref wrapped the WHOLE
bar, which CONTAINS the model control — so clicking model/thinking
while stats was open counted as 'inside' and nothing closed, while
the reverse direction (model's ref wraps only its own buttons) closed
fine. The ref now anchors to the summary wrapper (button + popover),
matching the model picker's pattern. Both directions close now.

Also centers the stats row vertically in the dock: pt-1.5 -> pt-4,
equal to the block's pb-4 — the row sits midway between the
composer's bottom and the page bottom. (Font size already matched:
both sides compute to 11px JetBrains Mono; the owner chose to keep
the color difference — muted stats vs bright labels.)

Verified live: model->stats, stats->model, stats->thinking all close
the open dropdown and open the new one; row has 16px above (visible
text) and 16px below.
---
 components/stats-bar.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/stats-bar.tsx b/components/stats-bar.tsx
index 0998fa6..ea235bf 100644
--- a/components/stats-bar.tsx
+++ b/components/stats-bar.tsx
@@ -61,18 +61,20 @@ export function StatsBar({
 
 	return (
 		<div
-			ref={barRef}
 			data-testid="stats-bar"
 			// pointer-events-auto: the sticky composer wrapper is pointer-events-none
 			// (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-1.5 text-xs text-muted-foreground"
+			className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-4 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)
-			    — not over the whole bar row, which made it line up oddly. */}
-			<div className="relative">
+			    — not over the whole bar row, which made it line up oddly. The
+			    outside-close ref anchors HERE too (owner, round 3): on the whole
+			    bar it wrapped the model control, so clicking model/thinking never
+			    counted as outside — the asymmetry the owner observed. */}
+			<div ref={barRef} className="relative">
 				<button
 					type="button"
 					onClick={() => setOpen((o) => !o)}