chore: refactor

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,8 +7,10 @@ const daysOfWeek = Object.values(DAY_MAP);
 daysOfWeek.pop();
 daysOfWeek.pop();
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-const grid = Array.from({ length: 5 }, () =>
-  Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
+const grid = Array.from({ length: 13 }, () =>
+  Array.from({ length: 5 }, (_, columnIndex) => (
+    <CalendarCell key={columnIndex} />
+  ))
 );
 
 /**
@@ -28,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 => (
@@ -38,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 {