From 4037f19550bd9c52c1ee1116cd7394982ffdf3b8 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 20 Feb 2026 23:52:17 +1300
Subject: [PATCH] fix: make TrimVideo left handle draggable by scoping
 pointer-events to thumbs

The end slider's full-width invisible body (higher z-index) was intercepting
all pointer events, preventing the start slider from receiving input. Fix by
setting pointer-events: none on both range inputs and pointer-events: all on
only the thumb pseudo-elements. Swap z-index so the start handle is on top
when both thumbs overlap at position 0.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/VideoTrimNode.tsx | 27 ++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/nodes/VideoTrimNode.tsx b/src/components/nodes/VideoTrimNode.tsx
index 6cdc8ecf..b53b6785 100644
--- a/src/components/nodes/VideoTrimNode.tsx
+++ b/src/components/nodes/VideoTrimNode.tsx
@@ -345,7 +345,22 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
         {hasSourceVideo && (
           <div className="shrink-0 flex flex-col gap-1.5 px-1">
             {/* Dual range slider */}
-            <div className="nodrag nowheel relative h-5 flex items-center">
+            <div className="nodrag nowheel relative h-5 flex items-center trim-slider-container">
+              {/* Make only the slider thumbs interactive, not the full-width invisible input bodies */}
+              <style>{`
+                .trim-slider-container input[type="range"] {
+                  pointer-events: none;
+                }
+                .trim-slider-container input[type="range"]::-webkit-slider-thumb {
+                  pointer-events: all;
+                  cursor: pointer;
+                }
+                .trim-slider-container input[type="range"]::-moz-range-thumb {
+                  pointer-events: all;
+                  cursor: pointer;
+                }
+              `}</style>
+
               {/* Track background */}
               <div className="absolute left-0 right-0 h-1.5 bg-neutral-700 rounded-full" />
 
@@ -355,7 +370,7 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
                 style={{ left: `${startPct}%`, right: `${100 - endPct}%` }}
               />
 
-              {/* Start slider */}
+              {/* Start slider (higher z-index so it's draggable when both thumbs overlap at 0) */}
               <input
                 type="range"
                 min={0}
@@ -363,8 +378,8 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
                 step={0.1}
                 value={startTime}
                 onChange={handleStartChange}
-                className="absolute w-full h-full opacity-0 cursor-pointer nodrag"
-                style={{ zIndex: 2 }}
+                className="absolute w-full h-full opacity-0 nodrag"
+                style={{ zIndex: 3 }}
               />
 
               {/* End slider */}
@@ -375,8 +390,8 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
                 step={0.1}
                 value={endTime}
                 onChange={handleEndChange}
-                className="absolute w-full h-full opacity-0 cursor-pointer nodrag"
-                style={{ zIndex: 3 }}
+                className="absolute w-full h-full opacity-0 nodrag"
+                style={{ zIndex: 2 }}
               />
 
               {/* Visual thumb indicators */}