OCT-1459: Currently active timeline event should always be shown at left of widget

client/src/components/Proposals/ProposalsTimelineWidget/ProposalsTimelineWidget.tsx

@@ -1,14 +1,17 @@
 import { isAfter, isSameDay, isWithinInterval } from 'date-fns';
 import { motion, useMotionValue } from 'framer-motion';
-import React, { ReactElement, useLayoutEffect, useRef } from 'react';
+import React, { ReactElement, useCallback, useEffect, useRef } from 'react';
 
 import ProposalsTimelineWidgetItem from 'components/Proposals/ProposalsTimelineWidgetItem';
 import getMilestones, { Milestone } from 'constants/milestones';
 
 import styles from './ProposalsTimelineWidget.module.scss';
 
+let isInitialResizeDone = false;
+
 const ProposalsTimelineWidget = (): ReactElement => {
   const constraintsRef = useRef<HTMLDivElement>(null);
+  const milestonesWrapperRef = useRef<HTMLDivElement>(null);
   const x = useMotionValue(0);
 
   const milestonesWithIsActive = getMilestones().reduce(
@@ -32,27 +35,47 @@ const ProposalsTimelineWidget = (): ReactElement => {
     [] as (Milestone & { isActive: boolean })[],
   );
 
-  useLayoutEffect(() => {
+  const setXValue = useCallback(() => {
     const milestoneWithIsActive = milestonesWithIsActive.find(({ isActive }) => isActive);
 
-    if (!milestoneWithIsActive) {
+    if (!milestoneWithIsActive || !constraintsRef.current || !milestonesWrapperRef.current) {
       return;
     }
 
     const el = document.getElementById(milestoneWithIsActive.id);
-    const elRight = el!.getBoundingClientRect()!.right;
-    const containerRight = constraintsRef.current!.getBoundingClientRect().right;
-    const elOffset = 24;
+    const { left: elLeft } = el!.getBoundingClientRect()!;
+    const { left: containerLeft, width: containerWidth } =
+      constraintsRef.current!.getBoundingClientRect();
+    const { width: milestonesWrapperWidth } = milestonesWrapperRef.current!.getBoundingClientRect();
+    const xMotionValue = elLeft > containerLeft ? -elLeft + containerLeft : 0;
+    const maxXValue = milestonesWrapperWidth - containerWidth;
+
+    x.set(xMotionValue < -maxXValue ? -maxXValue : xMotionValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!milestonesWrapperRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (!isInitialResizeDone) {
+        isInitialResizeDone = true;
+        return;
+      }
 
-    const xMotionValue = elRight > containerRight ? -elRight - elOffset + containerRight : 0;
-    x.set(xMotionValue);
+      setXValue();
+    });
+    resizeObserver.observe(milestonesWrapperRef.current);
+    return () => resizeObserver.disconnect();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <motion.div className={styles.root} data-test="ProposalsTimelineWidget">
       <div ref={constraintsRef} className={styles.constraintsWrapper}>
         <motion.div
+          ref={milestonesWrapperRef}
           className={styles.milestonesWrapper}
           drag="x"
           dragConstraints={constraintsRef}