3 files changed, 7 insertions, 21 deletions
diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx
index 0a51e107..ac884b71 100644
--- a/apps/web/src/components/editor/snap-indicator.tsx
+++ b/apps/web/src/components/editor/snap-indicator.tsx
@@ -28,9 +28,7 @@ export function SnapIndicator({
 
   // Track scroll position to lock snap indicator to frame
   useEffect(() => {
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
+    const tracksViewport = tracksScrollRef.current;
 
     if (!tracksViewport) return;
 
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index 695843a4..e84512ce 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -51,9 +51,7 @@ export function TimelinePlayhead({
 
   // Track scroll position to lock playhead to frame
   useEffect(() => {
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
+    const tracksViewport = tracksScrollRef.current;
 
     if (!tracksViewport) return;
 
@@ -86,9 +84,7 @@ export function TimelinePlayhead({
   // Get the timeline content width and viewport width for right boundary
   const timelineContentWidth =
     duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const tracksViewport = tracksScrollRef.current?.querySelector(
-    "[data-radix-scroll-area-viewport]"
-  ) as HTMLElement;
+  const tracksViewport = tracksScrollRef.current;
   const viewportWidth = tracksViewport?.clientWidth || 1000;
 
   // Constrain playhead to never appear outside the timeline area
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index ac59a8cd..08587228 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -119,12 +119,8 @@ export function useTimelinePlayhead({
 
   // Auto-scroll function during dragging
   const performAutoScroll = useCallback(() => {
-    const rulerViewport = rulerScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
+    const rulerViewport = rulerScrollRef.current;
+    const tracksViewport = tracksScrollRef.current;
 
     if (!rulerViewport || !tracksViewport || !isScrubbing) return;
 
@@ -240,12 +236,8 @@ export function useTimelinePlayhead({
     // Only auto-scroll during playback, not during manual interactions
     if (!isPlaying || isScrubbing) return;
 
-    const rulerViewport = rulerScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
+    const rulerViewport = rulerScrollRef.current;
+    const tracksViewport = tracksScrollRef.current;
     if (!rulerViewport || !tracksViewport) return;
 
     const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50