make upcoming event section scrollable

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>
   );

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;