From fd330c05e0615e572106e4a8a7a66fd644572649 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Thu, 1 Oct 2026 09:00:56 +0700
Subject: [PATCH] =?UTF-8?q?web:=20the=20histogram=20waits=20to=20be=20aske?=
 =?UTF-8?q?d=20for,=20the=20phone's=20ruler=20is=20a=20finger=20tall,=20an?=
 =?UTF-8?q?d=20its=20x=20answers=20a=20real=20press=20=E2=80=94=20a=2022px?=
 =?UTF-8?q?=20strip=20under=20a=2044px=20thumb,=20a=20histogram=20that=20o?=
 =?UTF-8?q?pened=20over=20the=20photo,=20and=20a=20close=20button=20whose?=
 =?UTF-8?q?=20press=20the=20drag's=20own=20preventDefault=20ate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker/frontend/src/styles/app.css    | 11 ++++++++++-
 docker/frontend/src/ui/Histogram.tsx  |  4 ++++
 docker/frontend/src/ui/ImageStage.tsx |  6 +++---
 3 files changed, 17 insertions(+), 4 deletions(-)

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<HTMLDivElement>) => {
     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.