Scrolling fixes and motion timeline changes (#10295)

* scrolling updates

* only scroll by 1 segment on desktop

web/src/components/timeline/EventSegment.tsx

@@ -17,6 +17,7 @@ import {
 import { HoverCardPortal } from "@radix-ui/react-hover-card";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
+import useTapUtils from "@/hooks/use-tap-utils";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -88,6 +89,8 @@ export function EventSegment({
 
   const apiHost = useApiHost();
 
+  const { handleTouchStart } = useTapUtils();
+
   const eventThumbnail = useMemo(() => {
     return getEventThumbnail(segmentTime);
   }, [getEventThumbnail, segmentTime]);
@@ -227,6 +230,9 @@ export function EventSegment({
                     key={`${segmentKey}_${index}_primary_data`}
                     className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
                     onClick={segmentClick}
+                    onTouchStart={(event) =>
+                      handleTouchStart(event, segmentClick)
+                    }
                   ></div>
                 </HoverCardTrigger>
                 <HoverCardPortal>