From ddc0413b8b0d663d613869b54a114be9dec60bc4 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 13 May 2024 00:59:29 +0200
Subject: [PATCH] style mobile calendar

---
 web/src/components/events/EventContainer.tsx         |  8 +++++++-
 web/src/components/events/eventContainer.module.scss | 11 ++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index e47041c..8fdcccb 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -58,7 +58,13 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
           {Object.keys(eventsByDate[yearMonth]).map((week) => (
             <div key={week} className={styles.calendarWeek}>
               {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
-                <div key={day} className={styles.calendarDay}>
+                <div
+                  key={day}
+                  className={`${styles.calendarDay} ${
+                    eventsByDate[yearMonth][week][day].length === 0 &&
+                    styles.empty
+                  }`}
+                >
                   <h3>
                     {formatDate(
                       parse(day, "yyyy-MM-dd", new Date()),
diff --git a/web/src/components/events/eventContainer.module.scss b/web/src/components/events/eventContainer.module.scss
index 226b291..608d78e 100644
--- a/web/src/components/events/eventContainer.module.scss
+++ b/web/src/components/events/eventContainer.module.scss
@@ -91,9 +91,7 @@
   }
 
   .calendarDay {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: var(--spacing-gap-column);
+
     min-height: 0;
     padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
 
@@ -101,8 +99,11 @@
       display: none;
     }
 
-    h3 {
-      grid-column: 1 / -1;
+    ul {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: var(--spacing-gap-column);
+      row-gap: var(--spacing-gap-row);
     }
 
     &:first-child,