More intelligent timeline scrolling (#10209)

* more intelligent timeline scrolling

* keep as div

web/src/hooks/use-handle-dragging.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
 
 type DragHandlerProps = {
   contentRef: React.RefObject<HTMLElement>;
@@ -75,6 +76,10 @@ function useDraggableHandler({
               minute: "2-digit",
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
+            scrollIntoView(thumb, {
+              scrollMode: "if-needed",
+              behavior: "smooth",
+            });
           }
         });
         if (setHandlebarTime) {
@@ -167,11 +172,6 @@ function useDraggableHandler({
         scrolled;
 
       updateHandlebarPosition(newHandlePosition - segmentHeight, handlebarTime);
-
-      scrollTimeRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps