Align timeline

components/Timeline.module.css

@@ -15,6 +15,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  align-items: end;
   gap: calc(20rem / 16);
 }
 
@@ -22,7 +23,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: end;
 }
 
 .time {
@@ -34,7 +35,7 @@
   word-wrap: break-word;
 }
 
-.circle {
+.outerCircle {
   background-color: var(--secondary-accent);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
   display: flex;

components/Timeline.tsx

@@ -17,8 +17,6 @@ interface TimelineProps {
   outerCircleWidth?: number;
   /** Width of the inner circles on the timeline, in pixels. */
   innerCircleWidth?: number;
-  /** Width of time label, in pixels. */
-  timeWidth?: number;
   /** Width of text label, in pixels. */
   textWidth?: number;
   /** Distance between the time label AND the text label to middle line, in pixels. */
@@ -32,14 +30,12 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
-  timeWidth = 1000,
   textWidth = 500,
   gap = 50,
   className,
 }: TimelineProps) {
   const largerMiddleElement =
     outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
-  const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
   if (innerCircleWidth > outerCircleWidth) {
     throw new Error(
       `<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
@@ -51,13 +47,12 @@ export function Timeline({
       className={
         className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
       }
-      style={{ width: width }}
     >
       <div
         className={styles.line}
         style={{
           width: lineWidth,
-          left: width / 2 - lineWidth / 2,
+          right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
         }}
       />
       <div className={styles.timelineSections}>
@@ -65,11 +60,9 @@ export function Timeline({
           <TimelineSection
             key={datum.time}
             datum={datum}
-            width={width}
             isTimeUppercase={isTimeUppercase}
             outerCircleWidth={outerCircleWidth}
             innerCircleWidth={innerCircleWidth}
-            timeWidth={timeWidth}
             textWidth={textWidth}
             gap={gap}
           />
@@ -81,42 +74,33 @@ export function Timeline({
 
 interface TimelineSectionProps {
   datum: TimelineData;
-  width: number;
   isTimeUppercase: boolean;
   outerCircleWidth: number;
   innerCircleWidth: number;
-  timeWidth: number;
   textWidth: number;
   gap: number;
 }
 
 function TimelineSection({
   datum,
-  width,
   isTimeUppercase,
   outerCircleWidth,
   innerCircleWidth,
-  timeWidth,
   textWidth,
   gap,
 }: TimelineSectionProps) {
   return (
     <div className={styles.timelineSection} style={{ gap: gap }}>
-      <div
-        className={styles.time}
-        style={{
-          width: timeWidth,
-          marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
-        }}
-      >
+      <div className={styles.time}>
         {isTimeUppercase ? datum.time.toUpperCase() : datum.time}
       </div>
       <div
-        className={styles.circle}
+        className={styles.outerCircle}
         style={{
           width: outerCircleWidth,
           height: outerCircleWidth,
           borderRadius: outerCircleWidth,
+          flex: `0 0 ${outerCircleWidth}px`,
         }}
       >
         <div
@@ -132,7 +116,7 @@ function TimelineSection({
         className={styles.text}
         style={{
           width: textWidth,
-          marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
+          flex: `0 0 ${textWidth}px`,
         }}
       >
         {datum.text}