Adapt review timeline for mobile devices (#10120)

* adapt timeline to mobile

* remove unused

* tweaks

* pointer cursor on segments

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

@@ -42,7 +42,7 @@ export const useEventUtils = (
     [segmentDuration]
   );
 
-  const alignDateToTimeline = useCallback(
+  const alignEndDateToTimeline = useCallback(
     (time: number): number => {
       const remainder = time % segmentDuration;
       const adjustment = remainder !== 0 ? segmentDuration - remainder : 0;
@@ -51,11 +51,21 @@ export const useEventUtils = (
     [segmentDuration]
   );
 
+  const alignStartDateToTimeline = useCallback(
+    (time: number): number => {
+      const remainder = time % segmentDuration;
+      const adjustment = remainder === 0 ? 0 : -(remainder);
+      return time + adjustment;
+    },
+    [segmentDuration]
+  );
+
   return {
     isStartOfEvent,
     isEndOfEvent,
     getSegmentStart,
     getSegmentEnd,
-    alignDateToTimeline,
+    alignEndDateToTimeline,
+    alignStartDateToTimeline,
   };
 };

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

@@ -4,7 +4,8 @@ interface DragHandlerProps {
   contentRef: React.RefObject<HTMLElement>;
   timelineRef: React.RefObject<HTMLDivElement>;
   scrollTimeRef: React.RefObject<HTMLDivElement>;
-  alignDateToTimeline: (time: number) => number;
+  alignStartDateToTimeline: (time: number) => number;
+  alignEndDateToTimeline: (time: number) => number;
   segmentDuration: number;
   showHandlebar: boolean;
   timelineDuration: number;
@@ -20,7 +21,7 @@ function useDraggableHandler({
   contentRef,
   timelineRef,
   scrollTimeRef,
-  alignDateToTimeline,
+  alignStartDateToTimeline,
   segmentDuration,
   showHandlebar,
   timelineDuration,
@@ -94,7 +95,7 @@ function useDraggableHandler({
         );
 
         const segmentIndex = Math.floor(newHandlePosition / segmentHeight);
-        const segmentStartTime = alignDateToTimeline(
+        const segmentStartTime = alignStartDateToTimeline(
           timelineStart - segmentIndex * segmentDuration
         );