Fix Sections

components/Sections.module.css

@@ -11,7 +11,7 @@
 }
 
 .separator {
-  flex: 1;
+  flex: 2;
   background-color: var(--label);
   height: calc(1rem / 16);
   width: 100%;

components/Sections.tsx

@@ -10,6 +10,8 @@ interface SectionsData {
 interface SectionsProps {
   /* Whether to display the "Sections" title and separator that appears on the left. */
   showHeader?: boolean;
+  /* Width of the entire Sections, in px. */
+  width?: number;
   data: SectionsData[];
   className?: string;
 }
@@ -17,6 +19,7 @@ interface SectionsProps {
 export function Sections({
   data,
   showHeader = true,
+  width = 800,
   className,
 }: SectionsProps) {
   return (
@@ -24,6 +27,7 @@ export function Sections({
       className={
         className ? `${className} ${styles.sections}` : `${styles.sections}`
       }
+      style={{ width: width }}
     >
       {showHeader ? (
         <>

components/Timeline.module.css

@@ -15,7 +15,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  align-items: end;
+  align-items: flex-end;
   gap: calc(20rem / 16);
 }
 
@@ -23,7 +23,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .time {