fix: unable to resize elements to be bigger

apps/web/src/hooks/use-timeline-element-resize.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
 
 interface UseTimelineElementResizeProps {
@@ -21,6 +21,28 @@ export function useTimelineElementResize({
 }: UseTimelineElementResizeProps) {
   const [resizing, setResizing] = useState<ResizeState | null>(null);
 
+  // Set up document-level mouse listeners during resize (like proper drag behavior)
+  useEffect(() => {
+    if (!resizing) return;
+
+    const handleDocumentMouseMove = (e: MouseEvent) => {
+      updateTrimFromMouseMove({ clientX: e.clientX });
+    };
+
+    const handleDocumentMouseUp = () => {
+      handleResizeEnd();
+    };
+
+    // Add document-level listeners for proper drag behavior
+    document.addEventListener("mousemove", handleDocumentMouseMove);
+    document.addEventListener("mouseup", handleDocumentMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleDocumentMouseMove);
+      document.removeEventListener("mouseup", handleDocumentMouseUp);
+    };
+  }, [resizing]); // Re-run when resizing state changes
+
   const handleResizeStart = (
     e: React.MouseEvent,
     elementId: string,
@@ -42,26 +64,23 @@ export function useTimelineElementResize({
     if (!resizing) return;
 
     const deltaX = e.clientX - resizing.startX;
+    // Reasonable sensitivity for resize operations - similar to timeline scale
     const deltaTime = deltaX / (50 * zoomLevel);
 
     if (resizing.side === "left") {
-      const newTrimStart = Math.max(
+      const maxAllowed = element.duration - resizing.initialTrimEnd - 0.1;
-        0,
+      const calculated = resizing.initialTrimStart + deltaTime;
-        Math.min(
+      const newTrimStart = Math.max(0, Math.min(maxAllowed, calculated));
-          element.duration - element.trimEnd - 0.1,
+
-          resizing.initialTrimStart + deltaTime
+      onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd);
-        )
-      );
-      onUpdateTrim(track.id, element.id, newTrimStart, element.trimEnd);
     } else {
-      const newTrimEnd = Math.max(
+      // For right resize (expanding element), allow trimEnd to go to 0 but cap at element duration
-        0,
+      const calculated = resizing.initialTrimEnd - deltaTime;
-        Math.min(
+      // Prevent negative trim AND prevent trimEnd from exceeding element duration
-          element.duration - element.trimStart - 0.1,
+      const maxTrimEnd = element.duration - resizing.initialTrimStart - 0.1; // Leave at least 0.1s visible
-          resizing.initialTrimEnd - deltaTime
+      const newTrimEnd = Math.max(0, Math.min(maxTrimEnd, calculated));
-        )
+
-      );
+      onUpdateTrim(track.id, element.id, resizing.initialTrimStart, newTrimEnd);
-      onUpdateTrim(track.id, element.id, element.trimStart, newTrimEnd);
     }
   };
 
@@ -77,7 +96,8 @@ export function useTimelineElementResize({
     resizing,
     isResizing: resizing !== null,
     handleResizeStart,
-    handleResizeMove,
+    // Return empty handlers since we use document listeners now
-    handleResizeEnd,
+    handleResizeMove: () => {}, // Not used anymore
+    handleResizeEnd: () => {}, // Not used anymore
   };
 }