From 12e610659eecdc210accccf75f5fb6c54243ad8f Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 03:41:18 +0200
Subject: [PATCH] fix(downloads): clamp editor hover-scrub popover inside the
 track

The hover-scrub thumbnail was centered on the cursor with a fixed -translate-x-1/2, so near the
filmstrip's right (or left) edge it overflowed the modal and triggered a horizontal scrollbar. Now
its left edge is clamped to [0, trackW - popoverW] so it shifts inward at the edges and stays fully
within the viewport. Verified at both edges in a real browser.
---
 frontend/src/components/VideoEditor.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/VideoEditor.tsx b/frontend/src/components/VideoEditor.tsx
index 91726d4..f77ab51 100644
--- a/frontend/src/components/VideoEditor.tsx
+++ b/frontend/src/components/VideoEditor.tsx
@@ -221,6 +221,19 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
   };
   const stripCells = strip && trackW ? Math.max(1, Math.floor(trackW / (44 * aspect))) : 0;
   const hoverTime = hoverX != null ? timeAt(hoverX) : null;
+  // Clamp the hover-scrub popover inside the track so it never overflows the modal (which would
+  // add a horizontal scrollbar): center it on the cursor, but keep both edges within [0, trackW].
+  const HOVER_W = 148;
+  const hoverLeft =
+    hoverX != null
+      ? Math.max(
+          0,
+          Math.min(
+            Math.max(0, (trackW || HOVER_W) - HOVER_W),
+            hoverX - (trackRef.current?.getBoundingClientRect().left ?? 0) - HOVER_W / 2
+          )
+        )
+      : 0;
 
   // --- create ---
   const kept = segments.filter((s) => s.keep);
@@ -416,10 +429,10 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
           {/* hover-scrub thumbnail */}
           {strip && hoverTime != null && (
             <div
-              className="absolute bottom-full mb-2 -translate-x-1/2 pointer-events-none z-30 rounded-md overflow-hidden border border-border shadow-xl bg-black"
-              style={{ left: hoverX! - (trackRef.current?.getBoundingClientRect().left ?? 0) }}
+              className="absolute bottom-full mb-2 pointer-events-none z-30 rounded-md overflow-hidden border border-border shadow-xl bg-black"
+              style={{ left: hoverLeft, width: HOVER_W }}
             >
-              <div style={{ width: 148, height: 148 / aspect, ...tileStyle(Math.floor(hoverTime / (strip.interval_s || 1))) }} />
+              <div style={{ width: HOVER_W, height: HOVER_W / aspect, ...tileStyle(Math.floor(hoverTime / (strip.interval_s || 1))) }} />
               <div className="text-[10px] text-center text-muted py-0.5 tabular-nums">{tc(hoverTime)}</div>
             </div>
           )}