put segment height in hook

web/src/components/timeline/ReviewTimeline.tsx

@@ -69,18 +69,15 @@ export function ReviewTimeline({
   );
   const exportSectionRef = useRef<HTMLDivElement>(null);
 
-  const segmentHeight = 8;
-
   const [draggableElementType, setDraggableElementType] =
     useState<DraggableElement>();
 
-  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    {
+  const { alignStartDateToTimeline, alignEndDateToTimeline, segmentHeight } =
+    useTimelineUtils({
       segmentDuration,
       timelineDuration,
       timelineRef,
-    },
-  );
+    });
 
   const paddedExportStartTime = useMemo(() => {
     if (exportStartTime) {

web/src/hooks/use-draggable-element.ts

@@ -46,20 +46,18 @@ function useDraggableElement({
   setDraggableElementPosition,
   dense,
 }: DraggableElementProps) {
-  const segmentHeight = 8;
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
   const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
   const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
   const [fullTimelineHeight, setFullTimelineHeight] = useState<number>();
   const [segments, setSegments] = useState<HTMLDivElement[]>([]);
-  const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
-    {
+  const { alignStartDateToTimeline, getCumulativeScrollTop, segmentHeight } =
+    useTimelineUtils({
       segmentDuration: segmentDuration,
       timelineDuration: timelineDuration,
       timelineRef,
-    },
-  );
+    });
 
   const draggingAtTopEdge = useMemo(() => {
     if (clientYPosition && timelineRef.current && scrollEdgeSize) {
@@ -147,7 +145,7 @@ function useDraggableElement({
     (time: number) => {
       return ((timelineStartAligned - time) / segmentDuration) * segmentHeight;
     },
-    [segmentDuration, timelineStartAligned],
+    [segmentDuration, timelineStartAligned, segmentHeight],
   );
 
   const updateDraggableElementPosition = useCallback(

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

@@ -11,6 +11,8 @@ export function useTimelineUtils({
   timelineDuration,
   timelineRef,
 }: TimelineUtilsProps) {
+  const segmentHeight = 8;
+
   const alignEndDateToTimeline = useCallback(
     (time: number): number => {
       const remainder = time % segmentDuration;
@@ -42,8 +44,6 @@ export function useTimelineUtils({
     if (timelineRef?.current && timelineDuration) {
       const { clientHeight: visibleTimelineHeight } = timelineRef.current;
 
-      const segmentHeight = 8;
-
       const visibleTime =
         (visibleTimelineHeight / segmentHeight) * segmentDuration;
 
@@ -56,5 +56,6 @@ export function useTimelineUtils({
     alignStartDateToTimeline,
     getCumulativeScrollTop,
     getVisibleTimelineDuration,
+    segmentHeight,
   };
 }