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:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user