From f492ac9aad81a26e7806ddfd433e11f1cd24c609 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 17 Jul 2025 23:51:12 +0200
Subject: [PATCH] fix: timeline element resizing

---
 apps/web/src/components/editor/timeline-element.tsx |  2 ++
 apps/web/src/hooks/use-timeline-element-resize.ts   | 12 +++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 71b2cd26..d1212266 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -96,6 +96,8 @@ export function TimelineElement({
     isBeingDragged && dragState.isDragging
       ? dragState.currentTime
       : element.startTime;
+
+  // Element should always be positioned at startTime - trimStart only affects content, not position
   const elementLeft = elementStartTime * 50 * zoomLevel;
 
   const handleDeleteElement = () => {
diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts
index 0e409977..63b566c2 100644
--- a/apps/web/src/hooks/use-timeline-element-resize.ts
+++ b/apps/web/src/hooks/use-timeline-element-resize.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useMediaStore } from "@/stores/media-store";
+import { useTimelineStore } from "@/stores/timeline-store";
 
 interface UseTimelineElementResizeProps {
   element: TimelineElement;
@@ -28,6 +29,7 @@ export function useTimelineElementResize({
 }: UseTimelineElementResizeProps) {
   const [resizing, setResizing] = useState<ResizeState | null>(null);
   const { mediaItems } = useMediaStore();
+  const { updateElementStartTime } = useTimelineStore();
 
   // Set up document-level mouse listeners during resize (like proper drag behavior)
   useEffect(() => {
@@ -100,12 +102,20 @@ export function useTimelineElementResize({
     const deltaTime = deltaX / (50 * zoomLevel);
 
     if (resizing.side === "left") {
-      // Left resize - only trim within original duration
+      // Left resize - trim content AND move element position to the right
       const maxAllowed = element.duration - resizing.initialTrimEnd - 0.1;
       const calculated = resizing.initialTrimStart + deltaTime;
       const newTrimStart = Math.max(0, Math.min(maxAllowed, calculated));
 
+      // Calculate how much the trim changed and update startTime accordingly
+      const trimDelta = newTrimStart - resizing.initialTrimStart;
+      const newStartTime = element.startTime + trimDelta;
+
+      // Update both trim and start time for proper left resize behavior
       onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd);
+
+      // Update startTime so element moves to the right when trimming from left
+      updateElementStartTime(track.id, element.id, newStartTime);
     } else {
       // Right resize - can extend duration for supported element types
       const calculated = resizing.initialTrimEnd - deltaTime;