Scrolling fixes and motion timeline changes (#10295)

* scrolling updates

* only scroll by 1 segment on desktop

web/src/hooks/use-tap-utils.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+
+interface TapUtils {
+  handleTouchStart: (
+    event: React.TouchEvent<Element>,
+    onClick: () => void,
+  ) => void;
+}
+
+const useTapUtils = (): TapUtils => {
+  const handleTouchStart = useCallback(
+    (event: React.TouchEvent<Element>, onClick: () => void) => {
+      event.preventDefault();
+
+      const element = event.target as Element;
+      const { clientX, clientY } = event.changedTouches[0];
+
+      // Determine if the touch is within the element's bounds
+      const rect = element.getBoundingClientRect();
+      if (
+        clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom
+      ) {
+        // Call the onClick handler
+        onClick();
+      }
+    },
+    [],
+  );
+
+  return { handleTouchStart };
+};
+
+export default useTapUtils;