feat: reposition items on resize

Author: stampaaaron

src/components/Timeline.css

@@ -23,6 +23,7 @@
   position: absolute;
   width: 50%;
   display: flex;
+  transition: top 0.1s;
 }
 
 .timeline-item--left {

src/components/Timeline.stories.mdx

@@ -10,7 +10,7 @@ export const items = [
       title: '1 First date',
       date: new Date(),
       children:
-        'alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  ',
+        'alsjflskdf jsdklfjsdlkjd slkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdkl fjsdlkjdslkjds alfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  alsj flskdfjsdkl fjsdlkjdslk jds alfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj als jflskdfjs  dklfjsdlkjdslk jdsalfjadslk ajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  ',
     },
     { key: 2, title: '2 Another date', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
     { key: 3, title: '3 A cool event', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },

src/components/Timeline.tsx

@@ -43,7 +43,7 @@ export function Timeline(props: TimelineProps) {
     return itemsRef.current;
   }
 
-  useEffect(() => {
+  function positionTimelineItems() {
     const elements = Array.from(getRefMap().values());
 
     const { left, right } = resolveOffsets(offset ?? 0);
@@ -58,12 +58,14 @@ export function Timeline(props: TimelineProps) {
 
         element.style.top = `${rightHeight}px`;
         element.classList.add('timeline-item--right');
+        element.classList.remove('timeline-item--left');
         rightHeight += element.offsetHeight + (gap ?? 0);
       } else {
         rightHeight += getMarkerCompensationOffset(leftHeight, rightHeight);
 
         element.style.top = `${leftHeight}px`;
         element.classList.add('timeline-item--left');
+        element.classList.remove('timeline-item--right');
         leftHeight += element.offsetHeight + (gap ?? 0);
       }
     });
@@ -72,7 +74,13 @@ export function Timeline(props: TimelineProps) {
     if (timelineElement) {
       timelineElement.style.height = `${Math.max(leftHeight, rightHeight)}px`;
     }
-  }, [itemsRef]);
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', positionTimelineItems);
+    return () => window.removeEventListener('resize', positionTimelineItems);
+  }, []);
+  useEffect(positionTimelineItems, [itemsRef]);
 
   return (
     <div className={['timeline', className].join(' ')} ref={timelineRef}>