From 95e0544b7301d382439b74038fb1b3e25dfe6d30 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 22:24:20 -0600
Subject: [PATCH] feat: add timeAndGrid div

---
 .../CalendarGrid/CalendarGrid.module.scss     |  4 +++
 .../common/CalendarGrid/CalendarGrid.tsx      | 25 ++++++++++---------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index ff27105c5..b17367cab 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -40,6 +40,10 @@
     line-height: normal;
 }
 
+.timeAndGrid {
+    display: flex;
+}
+
 .timeColumn {
     display: flex;
     min-height: 573px;
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 7a336b122..5adde216a 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -31,19 +31,20 @@ const Calendar: React.FC = (props) => {
         ))}
       </div>
       {/* Displaying the rest of the calendar */}
-      <div className={styles.timeColumn}>
-        {hoursOfDay.map((hour) => (
-          <div key={hour} className={styles.timeLabelContainer}>
-            <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
-          </div>
-        ))}
+      <div className={styles.timeAndGrid}>
+        <div className={styles.timeColumn}>
+          {hoursOfDay.map((hour) => (
+            <div key={hour} className={styles.timeLabelContainer}>
+              <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
+            </div>
+          ))}
+        </div>
+        <div className={styles.calendarGrid}>
+          {grid.map((row, rowIndex) => (
+            row
+          ))}
+        </div>
       </div>
-      <div className={styles.calendarGrid}>
-        {grid.map((row, rowIndex) => (
-          row
-        ))}
-      </div>
-
     </div>
   )
 };