peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(downloads): clamp editor hover-scrub popover inside the track

Browse source 
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.
This commit is contained in:
npeter83 2026-07-04 03:41:18 +02:00
parent 2dccae0e54
commit 12e610659e
1 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/components/VideoEditor.tsx
View file

@ -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 stripCells = strip && trackW ? Math.max(1, Math.floor(trackW / (44 * aspect))) : 0;
const hoverTime = hoverX != null ? timeAt(hoverX) : null; 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 --- // --- create ---
const kept = segments.filter((s) => s.keep); const kept = segments.filter((s) => s.keep);
@ -416,10 +429,10 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
{/* hover-scrub thumbnail */} {/* hover-scrub thumbnail */}
{strip && hoverTime != null && ( {strip && hoverTime != null && (
<div <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" className="absolute bottom-full mb-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) }} 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 className="text-[10px] text-center text-muted py-0.5 tabular-nums">{tc(hoverTime)}</div>
</div> </div>
)} )}