1 files changed, 44 insertions, 40 deletions

diff --git a/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
index 473c6f3e..6537d909 100644
--- a/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
@@ -1,57 +1,61 @@
 import { useEffect, useRef } from "react";
 
 export interface TimelineScrollSyncProps {
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
 }
 
 export function useTimelineScrollSync({
-  rulerScrollRef,
-  tracksScrollRef,
+	rulerScrollRef,
+	tracksScrollRef,
 }: TimelineScrollSyncProps) {
-  const isUpdatingRef = useRef(false);
-  const lastSyncRef = useRef(0);
+	const isUpdatingRef = useRef(false);
+	const lastSyncRef = useRef(0);
 
-  // --- Horizontal scroll synchronization between ruler and tracks ---
-  useEffect(() => {
-    const rulerViewport = rulerScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
+	// --- Horizontal scroll synchronization between ruler and tracks ---
+	useEffect(() => {
+		const rulerViewport = rulerScrollRef.current?.querySelector(
+			"[data-radix-scroll-area-viewport]",
+		) as HTMLElement;
+		const tracksViewport = tracksScrollRef.current?.querySelector(
+			"[data-radix-scroll-area-viewport]",
+		) as HTMLElement;
 
-    if (!rulerViewport || !tracksViewport) return;
+		if (!rulerViewport || !tracksViewport) return;
 
-    // Throttled scroll handlers for better performance
-    const handleRulerScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
-      lastSyncRef.current = now;
+		// Throttled scroll handlers for better performance
+		const handleRulerScroll = () => {
+			const now = Date.now();
+			if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
+			lastSyncRef.current = now;
 
-      isUpdatingRef.current = true;
-      tracksViewport.scrollLeft = rulerViewport.scrollLeft;
-      isUpdatingRef.current = false;
-    };
+			isUpdatingRef.current = true;
+			tracksViewport.scrollLeft = rulerViewport.scrollLeft;
+			isUpdatingRef.current = false;
+		};
 
-    const handleTracksScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
-      lastSyncRef.current = now;
+		const handleTracksScroll = () => {
+			const now = Date.now();
+			if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
+			lastSyncRef.current = now;
 
-      isUpdatingRef.current = true;
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft;
-      isUpdatingRef.current = false;
-    };
+			isUpdatingRef.current = true;
+			rulerViewport.scrollLeft = tracksViewport.scrollLeft;
+			isUpdatingRef.current = false;
+		};
 
-    rulerViewport.addEventListener("scroll", handleRulerScroll, { passive: true });
-    tracksViewport.addEventListener("scroll", handleTracksScroll, { passive: true });
+		rulerViewport.addEventListener("scroll", handleRulerScroll, {
+			passive: true,
+		});
+		tracksViewport.addEventListener("scroll", handleTracksScroll, {
+			passive: true,
+		});
 
-    return () => {
-      rulerViewport.removeEventListener("scroll", handleRulerScroll);
-      tracksViewport.removeEventListener("scroll", handleTracksScroll);
-    };
-  }, [rulerScrollRef, tracksScrollRef]);
+		return () => {
+			rulerViewport.removeEventListener("scroll", handleRulerScroll);
+			tracksViewport.removeEventListener("scroll", handleTracksScroll);
+		};
+	}, [rulerScrollRef, tracksScrollRef]);
 
-  return null;
+	return null;
 }