From 1375295d54929eb871075d8cd0382cc50d11e5dd Mon Sep 17 00:00:00 2001 From: amosblomqvist Date: Fri, 2 Oct 2026 01:14:46 +0300 Subject: [PATCH] =?UTF-8?q?slider=20round=205:=20the=20rail=20painted=20OV?= =?UTF-8?q?ER=20the=20disc=20=E2=80=94=20stacking=20law=20fixed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Round-4 regression, root-caused: - The rail overlay (position:absolute) painted above the in-flow input no matter the DOM order — CSS paints positioned elements after in-flow ones — so the bar sliced across the disc ('disc behind the bar'). - The wrapper's height was unpinned: the rail's top-1/2 centered against a stretched box while the disc rode the input at the top — vertical drift, which also exaggerated the disc's overhang and made the original-size 16px disc read oversized. Fix: the input is absolute inset-0 too (DOM order now governs — the disc rides above the rail), and the wrapper is pinned to h-4 so rail center and disc track share one box. Geometry otherwise unchanged from round 4: rail spans the thumb-center range, 0/100 flush at the very ends, solid ticks, no rim. --- components/question-dock.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/components/question-dock.tsx b/components/question-dock.tsx index f3763b7..3a53283 100644 --- a/components/question-dock.tsx +++ b/components/question-dock.tsx @@ -644,15 +644,19 @@ function QuestionDockForm({ Confidence
{/* The RAIL is painted here, not on the input: this overlay spans - exactly the thumb-CENTER range (inset 8px = half the 16px disc, - left and right), so at 0 and 100 the disc sits flush against the - rail's very ends — no bare stub poking past it (owner round 4). - The input on top is pure interaction: full width, transparent, - native drag and click. */} + exactly the thumb-CENTER range (inset 8px = half the 16px disc, + left and right), so at 0 and 100 the disc sits flush against the + rail's very ends — no bare stub poking past it (owner round 4). + STACKING LAW (owner round 5): the input is absolute too — a + positioned overlay paints above an in-flow input no matter the + DOM order, which put the rail OVER the disc. Both positioned, + input later in DOM → the disc rides on top. The wrapper's height + is pinned (h-4) so the rail's top-1/2 and the disc's track share + one box — centered by construction, not by hope. */}