fix: consider gaps for positioning

Author: stampaaaron

src/components/Timeline.css

@@ -31,7 +31,6 @@
 .timeline__items-container {
   display: flex;
   flex-direction: column;
-  gap: var(--gap);
   flex: 1;
 }
 
@@ -51,6 +50,10 @@
   gap: var(--card-offset);
 }
 
+.timeline-item:not(:last-child) {
+  margin-bottom: var(--gap);
+}
+
 .timeline__items-container--left .timeline-item {
   flex-direction: row-reverse;
 }

src/components/Timeline.tsx

@@ -57,9 +57,16 @@ export function Timeline(props: TimelineProps) {
     let leftHeight = leftContainer.current.offsetTop;
     let rightHeight = rightContainer.current.offsetTop;
 
-    const defaultMarkerOffset = elements[0].marker?.offsetTop ?? 0;
+    const [firstElement] = elements;
+
+    const defaultMarkerOffset = firstElement.marker?.offsetTop ?? 0;
     let nextMarkerOffset = defaultMarkerOffset;
 
+    if (!firstElement.item) return;
+
+    const { marginBottom } = getComputedStyle(firstElement.item);
+    const gapHeight = parseFloat(marginBottom);
+
     elements.forEach((refs) => {
       const { item, pointer, marker } = refs;
       if (!item || !pointer || !marker) return;
@@ -74,10 +81,10 @@ export function Timeline(props: TimelineProps) {
       // defines whether an item should be appended on the left or right side of the timeline
       if ((positioning !== 'right' && leftHeight > rightHeight) || positioning === 'left') {
         rightContainer.current?.appendChild(item);
-        rightHeight += item.offsetHeight;
+        rightHeight += item.offsetHeight + gapHeight;
       } else {
         leftContainer.current?.appendChild(item);
-        leftHeight += item.offsetHeight;
+        leftHeight += item.offsetHeight + gapHeight;
       }
     });
   }