slider round 5: the rail painted OVER the disc — stacking law fixed

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.
This commit is contained in:
amosblomqvist
2026-10-02 01:14:46 +03:00
parent a365438833
commit 1375295d54
+11 -7
View File
@@ -644,15 +644,19 @@ function QuestionDockForm({
Confidence
</span>
<div
className={cn("relative min-w-0 flex-1", sel.dontKnow && "opacity-40")}
className={cn("relative h-4 min-w-0 flex-1", sel.dontKnow && "opacity-40")}
data-testid="confidence-track"
>
{/* 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. */}
<div
aria-hidden
data-testid="confidence-rail"
@@ -701,7 +705,7 @@ function QuestionDockForm({
}}
style={{ color: CONFIDENCE_COLORS[confIdx] }}
className={cn(
"h-4 w-full cursor-pointer appearance-none bg-transparent outline-none",
"absolute inset-0 h-4 w-full cursor-pointer appearance-none bg-transparent outline-none",
"[&::-webkit-slider-runnable-track]:h-4 [&::-webkit-slider-runnable-track]:bg-transparent",
"[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-current",
"[&::-moz-range-track]:h-4 [&::-moz-range-track]:bg-transparent",