make upcoming event section scrollable

web/src/components/events/UpcomingEvents.tsx

@@ -23,6 +23,7 @@ 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.upcomingContent}>
         <div className={styles.eventList}>
           {Object.keys(eventsByDate).map((day) => {
             const eventsThisDay = eventsByDate[day];
@@ -48,6 +49,7 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
             );
           })}
         </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;