Use dynamic height and width for dialogs (#4567)

* Use dynamic height and width for dialogs

* Update tall-forks-bathe.md

---------

Co-authored-by: Siddharth Kshetrapal <[email protected]>

Author: dgreif

.changeset/tall-forks-bathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Dialog: Use dynamic view height/width. This allows available visible space to be properly computed on iOS devices.

packages/react/src/Dialog.tsx

@@ -33,10 +33,10 @@ const DialogBase = styled.div<StyledDialogBaseProps>`
   outline: none;
 
   @media screen and (max-width: 750px) {
-    width: 100vw;
+    width: 100dvw;
     margin: 0;
     border-radius: 0;
-    height: 100vh;
+    height: 100dvh;
   }
 
   ${sx};

packages/react/src/Dialog/Dialog.tsx

@@ -239,8 +239,8 @@ const StyledDialog = styled.div<StyledDialogProps>`
   width: ${props => widthMap[props.width ?? ('xlarge' as const)]};
   height: ${props => heightMap[props.height ?? ('auto' as const)]};
   min-width: 296px;
-  max-width: calc(100vw - 64px);
-  max-height: calc(100vh - 64px);
+  max-width: calc(100dvw - 64px);
+  max-height: calc(100dvh - 64px);
   border-radius: 12px;
   opacity: 1;
 
@@ -257,7 +257,7 @@ const StyledDialog = styled.div<StyledDialogProps>`
   }
 
   &[data-position-regular='left'] {
-    height: 100vh;
+    height: 100dvh;
     max-height: unset;
     border-radius: var(--borderRadius-large, 0.75rem);
     border-top-left-radius: 0;
@@ -269,7 +269,7 @@ const StyledDialog = styled.div<StyledDialogProps>`
   }
 
   &[data-position-regular='right'] {
-    height: 100vh;
+    height: 100dvh;
     max-height: unset;
     border-radius: var(--borderRadius-large, 0.75rem);
     border-top-right-radius: 0;
@@ -288,10 +288,10 @@ const StyledDialog = styled.div<StyledDialogProps>`
     }
 
     &[data-position-narrow='bottom'] {
-      width: 100vw;
+      width: 100dvw;
       height: auto;
-      max-width: 100vw;
-      max-height: calc(100vh - 64px);
+      max-width: 100dvw;
+      max-height: calc(100dvh - 64px);
       border-radius: var(--borderRadius-large, 0.75rem);
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
@@ -303,9 +303,9 @@ const StyledDialog = styled.div<StyledDialogProps>`
 
     &[data-position-narrow='fullscreen'] {
       width: 100%;
-      max-width: 100vw;
+      max-width: 100dvw;
       height: 100%;
-      max-height: 100vh;
+      max-height: 100dvh;
       border-radius: unset !important;
       flex-grow: 1;