chore: center div using display flex

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

@@ -13,6 +13,15 @@
     flex: 1 0 0;
 }
 
+.calendarGrid {
+    display: flex;
+    flex-direction: column;
+}
+
+.calendarRow {
+    display: flex;
+}
+
 .calendar {
     display: grid;
     grid-template-columns: auto repeat(5, 1fr);

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

@@ -30,22 +30,17 @@ const Calendar: React.FC = (props) => {
       </div>
 
       {/* Displaying the rest of the calendar */}
-      {hoursOfDay.map((hour) => (
-        <div key={hour} className={styles.row}>
-          {/* Hour column */}
-          <div className={styles.timeLabelContainer}>
-            <span>{hour}:00</span>
+      <div className={styles.calendarGrid}>
+        {hoursOfDay.map(hour => (
+          <div key={hour} className={styles.calendarRow}>
+            {daysOfWeek.map(day => (
+              <CalendarCell key={`${day}-${hour}`} />
+            ))}
           </div>
-          {/* Calendar cells for each day */}
-          {daysOfWeek.map((day, dayIndex) => (
-            <div key={`${day}-${hour}`} className={styles.timeBlock}>
-              <CalendarCell />
-            </div>
-          ))}
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
-  );
+  )
 };
 
 export default Calendar;