From 01f396b24f501aa57d10d363801884ac3a27f70c Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Sun, 11 Aug 2024 10:58:12 +0200
Subject: [PATCH] make upcoming event section scrollable

---
 web/src/components/events/UpcomingEvents.tsx  | 50 ++++++++++---------
 .../events/upcomingEvents.module.scss         | 14 +++++-
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/web/src/components/events/UpcomingEvents.tsx b/web/src/components/events/UpcomingEvents.tsx
index a6a3a52..c1c26c0 100644
--- a/web/src/components/events/UpcomingEvents.tsx
+++ b/web/src/components/events/UpcomingEvents.tsx
@@ -23,30 +23,32 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
   return (
     <section className={styles.upcomingWrapper}>
       <SectionHeader heading="Dette skjer på Neuf" link="/arrangementer?mode=calendar" linkText="Vis kalender" />
-      <div className={styles.eventList}>
-        {Object.keys(eventsByDate).map((day) => {
-          const eventsThisDay = eventsByDate[day];
-          return (
-            <div key={day}>
-              {/*<h3>
-                {formatDate(
-                  parse(day, "yyyy-MM-dd", new Date()),
-                  "eeee dd.MM."
-                )}
-              </h3>*/}
-              <ul>
-                {eventsThisDay.map((event) => (
-                  <EventItem
-                    key={`${event.id}-${event.occurrence.id}`}
-                    event={event}
-                    mode="singular-time-only"
-                    size="medium"
-                  />
-                ))}
-              </ul>
-            </div>
-          );
-        })}
+      <div className={styles.upcomingContent}>
+        <div className={styles.eventList}>
+          {Object.keys(eventsByDate).map((day) => {
+            const eventsThisDay = eventsByDate[day];
+            return (
+              <div key={day}>
+                {/*<h3>
+                  {formatDate(
+                    parse(day, "yyyy-MM-dd", new Date()),
+                    "eeee dd.MM."
+                  )}
+                </h3>*/}
+                <ul>
+                  {eventsThisDay.map((event) => (
+                    <EventItem
+                      key={`${event.id}-${event.occurrence.id}`}
+                      event={event}
+                      mode="singular-time-only"
+                      size="medium"
+                    />
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
       </div>
     </section>
   );
diff --git a/web/src/components/events/upcomingEvents.module.scss b/web/src/components/events/upcomingEvents.module.scss
index db9efac..27cd433 100644
--- a/web/src/components/events/upcomingEvents.module.scss
+++ b/web/src/components/events/upcomingEvents.module.scss
@@ -29,8 +29,20 @@
   }
 }
 
+.upcomingContent {
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-s) var(--spacing-sitepadding-inline);
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
 .eventList {
-  --size-item-width: 20rem;
+  --size-item-width: 21rem;
   margin-bottom: var(--spacing-xs);
   list-style: none;
   display: flex;