rename vars and change which div is absolutely positioned (#10358)

web/src/components/timeline/EventReviewTimeline.tsx

@@ -46,7 +46,7 @@ export function EventReviewTimeline({
   onHandlebarDraggingChange,
 }: EventReviewTimelineProps) {
   const [isDragging, setIsDragging] = useState(false);
-  const scrollTimeRef = useRef<HTMLDivElement>(null);
+  const handlebarRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const timelineDuration = useMemo(
@@ -68,7 +68,7 @@ export function EventReviewTimeline({
     useDraggableHandler({
       contentRef,
       timelineRef,
-      scrollTimeRef,
+      handlebarRef,
       alignStartDateToTimeline,
       alignEndDateToTimeline,
       segmentDuration,
@@ -143,7 +143,7 @@ export function EventReviewTimeline({
   return (
     <ReviewTimeline
       timelineRef={timelineRef}
-      scrollTimeRef={scrollTimeRef}
+      handlebarRef={handlebarRef}
       handlebarTimeRef={handlebarTimeRef}
       handleMouseMove={handleMouseMove}
       handleMouseUp={handleMouseUp}

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -47,7 +47,7 @@ export function MotionReviewTimeline({
   onHandlebarDraggingChange,
 }: MotionReviewTimelineProps) {
   const [isDragging, setIsDragging] = useState(false);
-  const scrollTimeRef = useRef<HTMLDivElement>(null);
+  const handlebarRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const timelineDuration = useMemo(
@@ -69,7 +69,7 @@ export function MotionReviewTimeline({
     useDraggableHandler({
       contentRef,
       timelineRef,
-      scrollTimeRef,
+      handlebarRef,
       alignStartDateToTimeline,
       alignEndDateToTimeline,
       segmentDuration,
@@ -145,7 +145,7 @@ export function MotionReviewTimeline({
   return (
     <ReviewTimeline
       timelineRef={timelineRef}
-      scrollTimeRef={scrollTimeRef}
+      handlebarRef={handlebarRef}
       handlebarTimeRef={handlebarTimeRef}
       handleMouseMove={handleMouseMove}
       handleMouseUp={handleMouseUp}

web/src/components/timeline/ReviewTimeline.tsx

@@ -2,7 +2,7 @@ import { ReactNode, RefObject } from "react";
 
 export type ReviewTimelineProps = {
   timelineRef: RefObject<HTMLDivElement>;
-  scrollTimeRef: RefObject<HTMLDivElement>;
+  handlebarRef: RefObject<HTMLDivElement>;
   handlebarTimeRef: RefObject<HTMLDivElement>;
   handleMouseMove: (
     e:
@@ -27,7 +27,7 @@ export type ReviewTimelineProps = {
 
 export function ReviewTimeline({
   timelineRef,
-  scrollTimeRef,
+  handlebarRef,
   handlebarTimeRef,
   handleMouseMove,
   handleMouseUp,
@@ -50,14 +50,17 @@ export function ReviewTimeline({
     >
       <div className="flex flex-col">{children}</div>
       {showHandlebar && (
-        <div className="absolute left-0 top-0 z-20 w-full" role="scrollbar">
+        <div
+          className="absolute left-0 top-0 z-20 w-full"
+          role="scrollbar"
+          ref={handlebarRef}
+        >
           <div
             className="flex items-center justify-center touch-none select-none"
             onMouseDown={handleMouseDown}
             onTouchStart={handleMouseDown}
           >
             <div
-              ref={scrollTimeRef}
               className={`relative w-full ${
                 isDragging ? "cursor-grabbing" : "cursor-grab"
               }`}