sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Stats bar round 3 (owner): symmetric dropdown closing + vertically centered row

Browse Source 
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.
This commit is contained in:
amosblomqvist
2026-09-14 10:10:01 +03:00
parent e13762fe9a
commit 5dac2a6620
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/stats-bar.tsx
+6 -4
View File
@@ -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)}