fix: event mobile layout

City-of-Helsinki · Dec 6, 2024 · c4be1f5 · c4be1f5
1 parent 333f404
commit c4be1f5
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 191 deletions.
diff --git 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
@@ -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
@@ -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>
 `;