UI tweaks (#9996)

* various tweaks

* update debounce time

* scroll to top with new events

web/src/components/timeline/EventReviewTimeline.tsx

@@ -187,14 +187,7 @@ export function EventReviewTimeline({
 
       setCurrentTimeSegment(alignedHandlebarTime);
     }
-  }, [
-    handlebarTime,
-    segmentDuration,
-    showHandlebar,
-    timelineDuration,
-    timelineStart,
-    alignDateToTimeline,
-  ]);
+  }, []);
 
   useEffect(() => {
     generateSegments();

web/src/components/timeline/EventSegment.tsx

@@ -186,14 +186,20 @@ export function EventSegment({
 
   const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
 
+  let debounceTimer: ReturnType<typeof setTimeout>;
+
+  function debounceScrollIntoView(element: HTMLElement) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 100);
+  }
+
   useEffect(() => {
     // Check if the first segment is out of view
     const firstSegment = firstMinimapSegmentRef.current;
     if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
-      firstSegment.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
+      debounceScrollIntoView(firstSegment);
     }
   }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);