From c4be1f5834fdd682015fd6b81c21483229d2d2e0 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Wed, 4 Dec 2024 11:35:58 +0200
Subject: [PATCH] fix: event mobile layout

---
 src/common/components/table/table.module.scss |   9 +-
 src/domain/app/header/Header.tsx              |   4 +-
 .../__snapshots__/Header.test.tsx.snap        | 176 +++++++++---------
 .../__snapshots__/PageLayout.test.tsx.snap    | 176 +++++++++---------
 src/domain/app/layout/pageLayout.module.scss  |   2 +
 .../event/eventImage/eventImage.module.scss   |   9 +-
 src/domain/event/eventPage.module.scss        |  27 ++-
 .../event/occurrences/occurrences.module.scss |   9 +-
 8 files changed, 221 insertions(+), 191 deletions(-)

diff --git a/src/common/components/table/table.module.scss b/src/common/components/table/table.module.scss
index 21943f62..bc86235e 100644
--- a/src/common/components/table/table.module.scss
+++ b/src/common/components/table/table.module.scss
@@ -2,6 +2,8 @@
 
 .tableWrapper {
   max-width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
 .table {
@@ -15,6 +17,7 @@
   --fontsize-cell-header: var(--fontsize-body-l);
   --margin-bottom-table: var(--spacing-m);
   --spacing-cell: var(--spacing-m) var(--spacing-xs);
+  --spacing-cell-mobile: var(--spacing-xs) var(--spacing-xs);
   --expanded-row-border-color: var(--color-black-30);
 
   width: 100%;
@@ -27,10 +30,11 @@
         font-size: var(--fontsize-cell-header);
         font-weight: normal;
         text-align: left;
-        padding: var(--spacing-cell);
+        padding: var(--spacing-cell-mobile);
         border-bottom: 1px solid var(--border-color-cell);
 
         @include respond-above(l) {
+          padding: var(--spacing-cell);
           &:nth-child(2) {
             padding-left: 0;
           }
@@ -60,9 +64,10 @@
         font-size: var(--fontsize-cell);
         font-weight: normal;
         text-align: left;
-        padding: var(--spacing-cell);
+        padding: var(--spacing-cell-mobile);
 
         @include respond-above(l) {
+          padding: var(--spacing-cell);
           &:nth-child(2) {
             padding-left: 0;
           }
diff --git a/src/domain/app/header/Header.tsx b/src/domain/app/header/Header.tsx
index bb0560c8..f20a6cd0 100644
--- a/src/domain/app/header/Header.tsx
+++ b/src/domain/app/header/Header.tsx
@@ -104,7 +104,7 @@ const Header: React.FC = () => {
   };
 
   return (
-    <div>
+    <>
       <Navigation
         languages={HARDCODED_LANGUAGES}
         menu={menu}
@@ -113,7 +113,7 @@ const Header: React.FC = () => {
         getPathnameForLanguage={getPathnameForLanguage}
       />
       <HeaderNotification />
-    </div>
+    </>
   );
 };
 
diff --git a/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap b/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap
index ced8361a..170f877f 100644
--- a/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap
+++ b/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap
@@ -1,112 +1,110 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header matches snapshot 1`] = `
-<div>
-  <header
-    class="hds-header Header-module_header__291GF"
-    style="--header-max-width: var(--breakpoint-xl);"
+<header
+  class="hds-header Header-module_header__291GF"
+  style="--header-max-width: var(--breakpoint-xl);"
+>
+  <div
+    class="Header-module_headerBackgroundWrapper__KsFy2"
   >
-    <div
-      class="Header-module_headerBackgroundWrapper__KsFy2"
+    <a
+      class="SkipLink-module_skipLink__1knzF"
+      href="#main-content"
     >
-      <a
-        class="SkipLink-module_skipLink__1knzF"
-        href="#main-content"
+      <span
+        class="SkipLink-module_skipLinkLabel__21n5B"
       >
-        <span
-          class="SkipLink-module_skipLinkLabel__21n5B"
-        >
-          skip to content
-        </span>
-      </a>
+        skip to content
+      </span>
+    </a>
+    <div
+      class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+    >
       <div
-        class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+        class="HeaderActionBar-module_headerActionBar__lPeGE"
       >
-        <div
-          class="HeaderActionBar-module_headerActionBar__lPeGE"
+        <a
+          aria-label="Helsingin kaupunki"
+          class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
+          href="#"
+          role="link"
         >
-          <a
-            aria-label="Helsingin kaupunki"
-            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
-            href="#"
-            role="link"
+          <span
+            class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
           >
-            <span
-              class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
-            >
-              <img
-                alt="Helsinki"
-                class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
-                src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
-              />
-            </span>
-          </a>
-          <a
-            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
-            href="#"
+            <img
+              alt="Helsinki"
+              class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
+              src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
+            />
+          </span>
+        </a>
+        <a
+          class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
+          href="#"
+        >
+          <span
+            class="HeaderActionBar-module_title__opzt9"
           >
-            <span
-              class="HeaderActionBar-module_title__opzt9"
-            >
-              Test site
-            </span>
-          </a>
+            Test site
+          </span>
+        </a>
+        <div
+          class="HeaderActionBar-module_headerActions__3lNnM"
+        >
           <div
-            class="HeaderActionBar-module_headerActions__3lNnM"
+            class="HeaderLanguageSelector-module_languageSelector__3d38B"
           >
             <div
-              class="HeaderLanguageSelector-module_languageSelector__3d38B"
+              class="HeaderLanguageSelector-module_languageNodes__lTe8p"
             >
-              <div
-                class="HeaderLanguageSelector-module_languageNodes__lTe8p"
+              <button
+                aria-current="true"
+                class="HeaderLanguageSelector-module_item__3_I7N HeaderLanguageSelector-module_activeItem__15LKg"
+                lang="fi"
+                type="button"
+              >
+                <span>
+                  Suomi
+                </span>
+              </button>
+              <button
+                aria-current="false"
+                class="HeaderLanguageSelector-module_item__3_I7N"
+                lang="sv"
+                type="button"
+              >
+                <span>
+                  Svenska
+                </span>
+              </button>
+              <button
+                aria-current="false"
+                class="HeaderLanguageSelector-module_item__3_I7N"
+                lang="en"
+                type="button"
               >
-                <button
-                  aria-current="true"
-                  class="HeaderLanguageSelector-module_item__3_I7N HeaderLanguageSelector-module_activeItem__15LKg"
-                  lang="fi"
-                  type="button"
-                >
-                  <span>
-                    Suomi
-                  </span>
-                </button>
-                <button
-                  aria-current="false"
-                  class="HeaderLanguageSelector-module_item__3_I7N"
-                  lang="sv"
-                  type="button"
-                >
-                  <span>
-                    Svenska
-                  </span>
-                </button>
-                <button
-                  aria-current="false"
-                  class="HeaderLanguageSelector-module_item__3_I7N"
-                  lang="en"
-                  type="button"
-                >
-                  <span>
-                    English
-                  </span>
-                </button>
-              </div>
+                <span>
+                  English
+                </span>
+              </button>
             </div>
           </div>
         </div>
       </div>
-      <div
-        class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+    </div>
+    <div
+      class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+    >
+      <nav
+        class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
       >
-        <nav
-          class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
-        >
-          <ul
-            class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
-          />
-        </nav>
-      </div>
+        <ul
+          class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
+        />
+      </nav>
     </div>
-  </header>
-</div>
+  </div>
+</header>
 `;
diff --git a/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap b/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap
index a51712c4..b9e54ae6 100644
--- a/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap
@@ -4,114 +4,112 @@ exports[`PageLayout matches snapshot 1`] = `
 <div
   class="pageLayout"
 >
-  <div>
-    <header
-      class="hds-header Header-module_header__291GF"
-      style="--header-max-width: var(--breakpoint-xl);"
+  <header
+    class="hds-header Header-module_header__291GF"
+    style="--header-max-width: var(--breakpoint-xl);"
+  >
+    <div
+      class="Header-module_headerBackgroundWrapper__KsFy2"
     >
-      <div
-        class="Header-module_headerBackgroundWrapper__KsFy2"
+      <a
+        class="SkipLink-module_skipLink__1knzF"
+        href="#main-content"
       >
-        <a
-          class="SkipLink-module_skipLink__1knzF"
-          href="#main-content"
+        <span
+          class="SkipLink-module_skipLinkLabel__21n5B"
         >
-          <span
-            class="SkipLink-module_skipLinkLabel__21n5B"
-          >
-            skip to content
-          </span>
-        </a>
+          skip to content
+        </span>
+      </a>
+      <div
+        class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+      >
         <div
-          class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+          class="HeaderActionBar-module_headerActionBar__lPeGE"
         >
-          <div
-            class="HeaderActionBar-module_headerActionBar__lPeGE"
+          <a
+            aria-label="Helsingin kaupunki"
+            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
+            href="#"
+            role="link"
           >
-            <a
-              aria-label="Helsingin kaupunki"
-              class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
-              href="#"
-              role="link"
+            <span
+              class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
             >
-              <span
-                class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
-              >
-                <img
-                  alt="Helsinki"
-                  class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
-                  src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
-                />
-              </span>
-            </a>
-            <a
-              class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
-              href="#"
+              <img
+                alt="Helsinki"
+                class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
+                src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
+              />
+            </span>
+          </a>
+          <a
+            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
+            href="#"
+          >
+            <span
+              class="HeaderActionBar-module_title__opzt9"
             >
-              <span
-                class="HeaderActionBar-module_title__opzt9"
-              >
-                Test site
-              </span>
-            </a>
+              Test site
+            </span>
+          </a>
+          <div
+            class="HeaderActionBar-module_headerActions__3lNnM"
+          >
             <div
-              class="HeaderActionBar-module_headerActions__3lNnM"
+              class="HeaderLanguageSelector-module_languageSelector__3d38B"
             >
               <div
-                class="HeaderLanguageSelector-module_languageSelector__3d38B"
+                class="HeaderLanguageSelector-module_languageNodes__lTe8p"
               >
-                <div
-                  class="HeaderLanguageSelector-module_languageNodes__lTe8p"
+                <button
+                  aria-current="true"
+                  class="HeaderLanguageSelector-module_item__3_I7N HeaderLanguageSelector-module_activeItem__15LKg"
+                  lang="fi"
+                  type="button"
+                >
+                  <span>
+                    Suomi
+                  </span>
+                </button>
+                <button
+                  aria-current="false"
+                  class="HeaderLanguageSelector-module_item__3_I7N"
+                  lang="sv"
+                  type="button"
                 >
-                  <button
-                    aria-current="true"
-                    class="HeaderLanguageSelector-module_item__3_I7N HeaderLanguageSelector-module_activeItem__15LKg"
-                    lang="fi"
-                    type="button"
-                  >
-                    <span>
-                      Suomi
-                    </span>
-                  </button>
-                  <button
-                    aria-current="false"
-                    class="HeaderLanguageSelector-module_item__3_I7N"
-                    lang="sv"
-                    type="button"
-                  >
-                    <span>
-                      Svenska
-                    </span>
-                  </button>
-                  <button
-                    aria-current="false"
-                    class="HeaderLanguageSelector-module_item__3_I7N"
-                    lang="en"
-                    type="button"
-                  >
-                    <span>
-                      English
-                    </span>
-                  </button>
-                </div>
+                  <span>
+                    Svenska
+                  </span>
+                </button>
+                <button
+                  aria-current="false"
+                  class="HeaderLanguageSelector-module_item__3_I7N"
+                  lang="en"
+                  type="button"
+                >
+                  <span>
+                    English
+                  </span>
+                </button>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+      </div>
+      <div
+        class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+      >
+        <nav
+          class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
         >
-          <nav
-            class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
-          >
-            <ul
-              class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
-            />
-          </nav>
-        </div>
+          <ul
+            class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
+          />
+        </nav>
       </div>
-    </header>
-  </div>
+    </div>
+  </header>
   <div
     class="pageBody"
     id="main-content"
diff --git a/src/domain/app/layout/pageLayout.module.scss b/src/domain/app/layout/pageLayout.module.scss
index 427c8989..0c73746c 100644
--- a/src/domain/app/layout/pageLayout.module.scss
+++ b/src/domain/app/layout/pageLayout.module.scss
@@ -3,6 +3,7 @@
 .pageLayout {
   --background-color-body: #f7f6f6;
   --padding-body: 0 0 10rem;
+  --padding-body-mobile: 0 0 2rem;
 
   min-height: 100vh;
   width: 100%;
@@ -20,6 +21,7 @@
   @include respond-below(m) {
     opacity: 1;
     transition: visibility 0.2s, opacity 0.2s;
+    padding: var(--padding-body-mobile);
 
     &.mobileMenuOpen {
       opacity: 0;
diff --git a/src/domain/event/eventImage/eventImage.module.scss b/src/domain/event/eventImage/eventImage.module.scss
index 0fe17ce2..4fea4363 100644
--- a/src/domain/event/eventImage/eventImage.module.scss
+++ b/src/domain/event/eventImage/eventImage.module.scss
@@ -1,13 +1,18 @@
 @import 'variables';
+@import 'layout';
 
 .imageContainer {
   --photographer-background-color: rgb(255 255 255 / 40%);
-  position: absolute;
+  position: relative;
   width: 100%;
-  height: var(--hero-height, 500px);
   top: 0;
   overflow: hidden;
 
+  @include respond-above(m) {
+    height: var(--hero-height, 500px);
+    position: absolute;
+  }
+
   .photographerText {
     position: absolute;
     bottom: 0;
diff --git a/src/domain/event/eventPage.module.scss b/src/domain/event/eventPage.module.scss
index 00a141f3..ef1b3904 100644
--- a/src/domain/event/eventPage.module.scss
+++ b/src/domain/event/eventPage.module.scss
@@ -6,6 +6,7 @@
 
   display: block;
   z-index: 1;
+  overflow: hidden;
 
   @include respond-above(m) {
     box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
@@ -20,7 +21,10 @@
 
 .sharePart {
   display: grid;
-  grid-template-columns: 1fr auto;
+
+  @include respond-above(m) {
+    grid-template-columns: 1fr auto;
+  }
 }
 
 .cancelEnrolmentButton {
@@ -53,16 +57,24 @@ h2.enrolmentHeader {
   --back-button-padding: 1rem;
   --hero-height: 500px;
 
-  height: var(--hero-height);
   position: relative;
 
   @include respond-above(m) {
+    height: var(--hero-height);
     margin-bottom: calc((-1 * var(--hero-height)) / 2);
   }
 
   .backButtonContainer {
     z-index: 1;
     padding-top: var(--back-button-padding);
+    position: absolute;
+    margin-left: var(--spacing-s);
+
+    @include respond-above(m) {
+      position: relative;
+      margin-left: 0;
+      margin-bottom: calc((-1 * var(--hero-height)) / 2);
+    }
 
     svg {
       color: var(--color-black);
@@ -99,8 +111,15 @@ h2.enrolmentHeader {
 
 .queueInfoContainer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+
+  @include respond-above(m) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 
   button {
     --background-color: var(--color-engel);
diff --git a/src/domain/event/occurrences/occurrences.module.scss b/src/domain/event/occurrences/occurrences.module.scss
index e8ddd042..5eefa582 100644
--- a/src/domain/event/occurrences/occurrences.module.scss
+++ b/src/domain/event/occurrences/occurrences.module.scss
@@ -13,11 +13,14 @@
   }
 
   .titleAndFilters {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 
     @include respond-above(m) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
       margin: 0 var(--spacing-2-xl);
     }
   }