From bb6cea24baba73f9daad8af3a06476b6ac0b890d Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Thu, 29 Jan 2026 15:31:23 -0800 Subject: [PATCH] Refactor StoryTrackEditor to account for time ruler height during drag operations - Introduced a constant for TIME_RULER_HEIGHT to improve code readability. - Updated drag position calculations to subtract the time ruler height, ensuring accurate positioning of clips relative to the tracks area. --- app/src/components/StoriesTab/StoryTrackEditor.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx index fb7004ce..16ff2da4 100644 --- a/app/src/components/StoriesTab/StoryTrackEditor.tsx +++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx @@ -111,6 +111,7 @@ interface StoryTrackEditorProps { } const TRACK_HEIGHT = 48; +const TIME_RULER_HEIGHT = 24; // h-6 = 1.5rem = 24px const MIN_PIXELS_PER_SECOND = 10; const MAX_PIXELS_PER_SECOND = 200; const DEFAULT_PIXELS_PER_SECOND = 50; @@ -589,7 +590,8 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) { }); setDragPosition({ x: rect.left - tracksRef.current.getBoundingClientRect().left + tracksRef.current.scrollLeft, - y: rect.top - tracksRef.current.getBoundingClientRect().top, + // Subtract ruler height since clips are positioned relative to tracks area, not the scrollable container + y: rect.top - tracksRef.current.getBoundingClientRect().top - TIME_RULER_HEIGHT, }); setDraggingItem(item.id); }; @@ -600,7 +602,8 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) { const rect = tracksRef.current.getBoundingClientRect(); const x = e.clientX - rect.left + tracksRef.current.scrollLeft - dragOffset.x; - const y = e.clientY - rect.top - dragOffset.y; + // Subtract ruler height since clips are positioned relative to tracks area + const y = e.clientY - rect.top - dragOffset.y - TIME_RULER_HEIGHT; setDragPosition({ x: Math.max(0, x), y }); },