Align grid items with module labels

src/components/pages/Timeline/index.tsx

@@ -61,28 +61,29 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
       const code = modulesList[i].code;
       const tracks = this.state.moduleTracks[code];
       if (tracks) {
-        const height = tracks.length * trackHeight;
-        const timelineBackgroundsClass = classNames(
-          i % 2 === 0
-            ? styles.timelineBackgroundEven
-            : styles.timelineBackgroundOdd,
-          i === 0 ? styles.timelineBackgroundFirst : "",
-          i === modulesList.length - 1 ? styles.timelineBackgroundLast : ""
-        );
         moduleHeadings.push(
           <div
             key={code}
             className={styles.moduleHeading}
-            style={{ height: `${height}rem` }}
+            style={{ height: `${tracks.length * trackHeight}rem` }}
           >
             <ModuleHeading moduleCode={code} title={modulesList[i].title} />
           </div>
         );
+        const timelineBackgroundsClass = classNames(
+          i % 2 === 0
+            ? styles.timelineBackgroundEven
+            : styles.timelineBackgroundOdd,
+          i === 0 ? styles.timelineBackgroundFirst : "",
+          i === modulesList.length - 1 ? styles.timelineBackgroundLast : ""
+        );
+        const offset =
+          i === modulesList.length - 1 || i === 0 ? 0.625 / 2 : 0.625;
         for (let j = 0; j < numWeeks; j++) {
           timelineBackgrounds.push(
             <div
               key={code + j}
-              style={{ height: `${height}rem` }}
+              style={{ height: `${tracks.length * trackHeight + offset}rem` }}
               className={timelineBackgroundsClass}
             ></div>
           );

src/components/pages/Timeline/style.module.scss

@@ -98,8 +98,9 @@
   grid-area: background;
   grid-template-columns: repeat(12, 15rem);
   grid-template-rows: auto;
-  grid-gap: 0.625rem;
-  padding-bottom: 0.625rem;
+	column-gap: 0.625rem;
+  row-gap: 0;
+  margin-bottom: 0.625rem;
 }
 
 .timelineBackgroundEven {