Use svh height to ensure consistent modal layout

Ensures a more consistent layout on mobile devices by accounting for dynamic changes in viewport height caused by browser UI elements, such as the address bar in Chrome.
danskernesdigitalebibliotek · Dec 18, 2024 · 21485f6 · 21485f6
1 parent 409a614
commit 21485f6
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss
@@ -8,7 +8,7 @@
   opacity: 0;
   display: none;
   transition: opacity 0.3s;
-  height: 100vh;
+  height: 100svh;
   overflow: auto;
 
   &__screen-reader-description {
@@ -51,7 +51,7 @@
   right: 0;
   max-width: 560px;
   width: 100%;
-  height: 100vh;
+  height: 100svh;
   margin: 0;
 }
 

diff --git a/src/stories/Library/dialog/dialog.scss b/src/stories/Library/dialog/dialog.scss
@@ -23,7 +23,7 @@
   // Apply custom
   background-color: $color__global-primary;
   position: fixed;
-  height: 100vh;
+  height: 100svh;
   width: 100%;
   left: auto;