Tactically Retreating

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -3,6 +3,7 @@
 
 .dayLabelContainer {
     display: flex;
+    flex-direction: row;
     height: 13px;
     min-width: 40px;
     min-height: 13px;

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -7,6 +7,11 @@ const daysOfWeek = Object.values(DAY_MAP);
 daysOfWeek.pop();
 daysOfWeek.pop();
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+const grid = Array.from({ length: 13 }, () =>
+  Array.from({ length: 5 }, (_, columnIndex) => (
+    <CalendarCell key={columnIndex} />
+  ))
+);
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
@@ -25,9 +30,8 @@ const Calendar: React.FC = (props) => {
           </div>
         ))}
       </div>
-
       {/* Displaying the rest of the calendar */}
-      <div className={styles.calendarGrid}>
+      {/* <div className={styles.calendarGrid}>
         {hoursOfDay.map(hour => (
           <div key={hour} className={styles.calendarRow}>
             {daysOfWeek.map(day => (
@@ -35,7 +39,8 @@ const Calendar: React.FC = (props) => {
             ))}
           </div>
         ))}
-      </div>
+      </div> */}
+
     </div>
   )
 };

src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss

@@ -7,7 +7,6 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    position: relative;
   }
   
   .hourLine {