refactor: handle left/right position using classes

Author: stampaaaron

src/components/Timeline.css

@@ -11,5 +11,13 @@ div.timeline__line {
 
 .timeline-item {
   position: absolute;
-  width: 50%;
+  width: 45%;
+}
+
+.timeline-item--left {
+  left: 0;
+}
+
+.timeline-item--right {
+  right: 0;
 }

src/components/Timeline.tsx

@@ -42,12 +42,12 @@ export function Timeline(props: TimelineProps) {
       const element = item;
       if (leftHeight > rightHeight) {
         element.style.top = `${rightHeight}px`;
-        element.style.right = '0';
+        element.classList.add('timeline-item--right');
         rightHeight += element.offsetHeight + (gap ?? 0);
       } else {
         element.style.top = `${leftHeight}px`;
         leftHeight += element.offsetHeight + (gap ?? 0);
-        element.style.left = '0';
+        element.classList.add('timeline-item--left');
       }
     });
   }, [itemsRef]);