From ceacc25021737491c155de366deb31372583c102 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 18 Aug 2024 00:15:20 -0700
Subject: [PATCH] Fixed session weekly rendering bug.

---
 .../websites/[websiteId]/sessions/SessionsWeekly.module.css  | 5 ++++-
 .../(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx  | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
index 59f0cca6..6f5bf6cb 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
@@ -13,16 +13,19 @@
 .day {
   display: flex;
   flex-direction: column;
+  align-items: start;
+  justify-content: start;
   gap: 1px;
   position: relative;
 }
 
 .cell {
   display: flex;
-  align-items: center;
   background-color: var(--base100);
   width: 20px;
   height: 20px;
+  margin: auto;
+  align-items: start;
 }
 
 .hour {
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index 0ee4805d..f9acaefc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -34,7 +34,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
 
   return (
     <LoadingPanel {...(props as any)} data={data}>
-      <div className={styles.week}>
+      <div key={data} className={styles.week}>
         <div className={styles.day}>
           <div className={styles.header}>&nbsp;</div>
           {Array(24)
@@ -50,7 +50,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
         </div>
         {data?.map((day: number[], index: number) => {
           return (
-            <div className={styles.day} key={index}>
+            <div key={index} className={styles.day}>
               <div className={styles.header}>
                 {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
               </div>