Merge pull request #574 from danskernesdigitalebibliotek/DDFFORM-517-…

…man-kan-zoome-for-langt-ud-pa-mobil Make sure header doesnt break out zoom on mobile. DDFFORM-517
danskernesdigitalebibliotek · Apr 8, 2024 · 69003ca · 69003ca
2 parents 25f5deb + 74797b0
commit 69003ca
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/stories/Blocks/header/header-sticky.js b/src/stories/Blocks/header/header-sticky.js
@@ -26,14 +26,20 @@ window.addEventListener("DOMContentLoaded", () => {
     lastScrollY = scrollY > 0 ? scrollY : 0;
 
     // Control header direction class.
+    const headerContainerSelector = ".header";
+
     if (scrollDirection === "down") {
-      const headerHeight = document.querySelector("header").offsetHeight;
+      const headerHeight = document.querySelector(
+        headerContainerSelector
+      ).offsetHeight;
       const headerDownTopPosition = headerHeight + headerDownTopPositionOffset;
       document.querySelector(
-        "header"
+        headerContainerSelector
       ).style.top = `-${headerDownTopPosition}px`;
     } else {
-      document.querySelector("header").style.top = `${headerYStartPosition}px`;
+      document.querySelector(
+        headerContainerSelector
+      ).style.top = `${headerYStartPosition}px`;
     }
   };
 

diff --git a/src/styles/scss/shared.scss b/src/styles/scss/shared.scss
@@ -48,6 +48,10 @@
   cursor: pointer;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 // When class is used on a block element it will show a loading ellipsis animation.
 .text-loading:after {
   overflow: hidden;