diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index faed2fa..77c2407 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -1719,8 +1719,17 @@ input[type="range"] { width: 100%; accent-color: var(--accent); } .col[data-col="slider"] input[type="range"] { -webkit-appearance: none; appearance: none; - height: 22px; + /* A finger is wider than the ruler. The strip the ticks are drawn on is + 22px tall, and a thumb that lands a dozen pixels off its centre is on the + photo above it or the row below — the drag never begins. The input's own + box is the target, so it grows to the finger; the track inside it keeps + the 22px the ruler is read at, because the pseudo-elements below set that + height themselves. touch-action none because the drag belongs to the + knob: nothing here may be taken for a scroll, a pull-to-refresh or a + URL-bar slide instead, and this row sits where those begin. */ + height: 44px; background: none; + touch-action: none; } /* One rule per engine: a grouped selector that names a pseudo-element the engine does not know — `-moz-range-track` in Chromium — is dropped whole, diff --git a/docker/frontend/src/ui/Histogram.tsx b/docker/frontend/src/ui/Histogram.tsx index e939e7c..6556784 100644 --- a/docker/frontend/src/ui/Histogram.tsx +++ b/docker/frontend/src/ui/Histogram.tsx @@ -250,6 +250,10 @@ export function Histogram({ url, onClose }: { url: string; onClose: () => void } const start = (e: React.PointerEvent) => { if (e.button !== 0) return; + // The × sits in this head but is a button, not a grip: preventDefault here + // swallows the click that follows the press (measured — a real click on it + // did nothing, while el.click() worked), so the press is left to it. + if ((e.target as HTMLElement).closest('.hist-close')) return; e.preventDefault(); e.stopPropagation(); e.currentTarget.setPointerCapture(e.pointerId); diff --git a/docker/frontend/src/ui/ImageStage.tsx b/docker/frontend/src/ui/ImageStage.tsx index 3fd850d..f46b0c2 100644 --- a/docker/frontend/src/ui/ImageStage.tsx +++ b/docker/frontend/src/ui/ImageStage.tsx @@ -419,9 +419,9 @@ export function ImageStage({ // 0.5 is the middle of the photo, which is where the bar starts. const [split, setSplit] = useState(0.5); const draggingSplit = useRef(false); - // The histogram overlay is shown by default and dismissed from its own frame - // or from the toolbar button; it steps aside while the crop frame is up. - const [showHist, setShowHist] = useState(true); + // The histogram overlay is closed when the studio opens and raised from the + // toolbar button or from its own frame; it steps aside while the crop frame is up. + const [showHist, setShowHist] = useState(false); // Where the eyedropper's own icon is drawing itself: a fraction of the photo, // which is what the layer is, so the stage's zoom cannot scale the offset a // second time and leave the icon drifting away from the cursor.