chore: trying some CSS

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,18 +1,5 @@
 .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

@@ -5,12 +5,14 @@ import styles from './CalendarGridCell.module.scss';
  * Component representing each 1 hour time block of a calendar
  * @param props
  */
-const CalendarCell: React.FC = props => {
+const CalendarCell: React.FC = (props) => {
-    return (
+  return (
-        <div className={styles.calendarCell}>
+    <div className={styles.calendarCell}>
-            <div className={styles.hourLine}></div>
+      <div className={styles.hourLine}>
-        </div>
+        TEMP
-    );
+      </div>
+    </div>
+  );
 };
 
 export default CalendarCell;