From 24aa472e59fddd404e36ae731d03998493b7c4ad Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Wed, 18 Dec 2024 11:42:18 +0100
Subject: [PATCH 1/2] Use `dvh` 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.
---
 src/stories/Library/Modals/modal.scss  | 4 ++--
 src/stories/Library/dialog/dialog.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss
index 9c4a1760a..f427862b1 100644
--- 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: 100dvh;
   overflow: auto;
 
   &__screen-reader-description {
@@ -51,7 +51,7 @@
   right: 0;
   max-width: 560px;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   margin: 0;
 }
 
diff --git a/src/stories/Library/dialog/dialog.scss b/src/stories/Library/dialog/dialog.scss
index 929376d3f..4ab3e87d5 100644
--- 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: 100dvh;
   width: 100%;
   left: auto;
 

From 92a7cd68baf774078682cca34ec2f5d5f1d47f8b Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Wed, 18 Dec 2024 13:22:11 +0100
Subject: [PATCH 2/2] Apply "min-height" to `.dialog--sidebar`

Ensures the `dvh` value correctly adjusts the modal when scrolling on mobile browsers with disappearing address bars
---
 src/stories/Library/dialog/dialog.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/dialog/dialog.scss b/src/stories/Library/dialog/dialog.scss
index 4ab3e87d5..1464838e2 100644
--- 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: 100dvh;
+  min-height: 100dvh;
   width: 100%;
   left: auto;