Retrying

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

@@ -24,8 +24,8 @@
 }
 
 .calendar {
-    display: grid;
+    // display: grid;
-    grid-template-columns: auto repeat(5, 1fr);
+    // grid-template-columns: auto repeat(5, 1fr);
     gap: 10px;
 }
 

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

@@ -41,6 +41,11 @@ const Calendar: React.FC = (props) => {
         ))}
       </div> */}
 
+      {grid.map((row, rowIndex) => (
+        <div className={styles.row} key={rowIndex}>
+          {row}
+        </div>
+      ))}
     </div>
   )
 };

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

@@ -1,19 +1,6 @@
 .calendarCell {
-    display: flex;
+  flex: 1;
-    width: 165px;
+  border: 1px solid #ddd;
-    height: 52.231px;
+  min-height: 50px; 
-    min-width: 45px;
+}
-    min-height: 40px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-  }
-  
-  .hourLine {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    border-top: 1px solid black; /* Adjust line styles as needed */
-  }
   

src/views/components/common/CalendarGridCell/CalendarGridCell.tsx

@@ -8,7 +8,9 @@ import styles from './CalendarGridCell.module.scss';
 const CalendarCell: React.FC = (props) => {
   return (
     <div className={styles.calendarCell}>
-      <div className={styles.hourLine}></div>
+      <div className={styles.hourLine}>
+        TEMP
+      </div>
     </div>
   );
 };