feat: use display: grid for calendarGrid

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

@@ -15,8 +15,10 @@
 }
 
 .calendarGrid {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+    grid-gap: 8px;
 }
 
 .calendarRow {

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

@@ -7,8 +7,8 @@ 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 }, () =>
+const grid = Array.from({ length: 5 }, () =>
-  Array.from({ length: 5 }, (_, columnIndex) => (
+  Array.from({ length: 13 }, (_, columnIndex) => (
     <CalendarCell key={columnIndex} />
   ))
 );
@@ -31,22 +31,15 @@ const Calendar: React.FC = (props) => {
         ))}
       </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 => (
-              <CalendarCell key={`${day}-${hour}`} />
-            ))}
-          </div>
-        ))}
-      </div> */}
-
         {grid.map((row, rowIndex) => (
           <div className={styles.row} key={rowIndex}>
             {row}
           </div>
         ))}
       </div>
+
+    </div>
   )
 };