fix: mobile modal button visible (#138)

* fix: initial attempt

* fix: check dvh loading

* fix: max height default

* fix: functional dvh approach

* fix: fallback case

* fix: reinstate support checks

* fix: instate overlay dvh

* fix: spacing tweak

src/overlays/Modal.scss

@@ -49,12 +49,21 @@
     width: auto;
   }
 
-  max-height: 100vh;
-  max-width: 100vw;
   @media (min-width: $screen-md) {
     max-height: calc(100vh - var(--bloom-s6));
     max-width: calc(100vw - var(--bloom-s6));
   }
+  @supports (max-height: 100dvh) {
+    --max-height: 100dvh;
+  }
+  @supports not (max-height: 100dvh) {
+    @media (max-width: $screen-sm) {
+      padding-bottom: var(--bloom-s20);
+      border: none;
+      box-shadow: none;
+      background-clip: content-box;
+    }
+  }
 }
 
 .modal__header {
@@ -147,4 +156,3 @@
     --modal-margin-top: var(--bloom-s6);
   }
 }
-

src/overlays/Modal.stories.tsx

@@ -254,30 +254,6 @@ export const ScrollableModalMinimalContent = () => {
   )
 }
 
-export const TransparentOverlayModal = () => (
-  <Modal
-    open={true}
-    title={text("Title", "Modal Title")}
-    ariaDescription={text("Aria Description", "Modal Description")}
-    hideCloseIcon={true}
-    actions={[
-      <Button
-        size={AppearanceSizeType.small}
-        onClick={noop}
-        styleType={AppearanceStyleType.primary}
-      >
-        {text("Action 2 Label", "Submit")}
-      </Button>,
-      <Button size={AppearanceSizeType.small} onClick={noop}>
-        {text("Action 1 Label", "Cancel")}
-      </Button>,
-    ]}
-    backdrop={false}
-  >
-    {text("Content", "Modal Content")}
-  </Modal>
-)
-
 export const ManyButtons = () => {
   const [openModal, setOpenModal] = useState(false)
 

src/overlays/Overlay.scss

@@ -4,6 +4,9 @@
   --overlay-background-color: var(--bloom-color-gray-950);
   --overlay-opacity: 0.5;
   --overlay-height: 100vh;
+  @supports (height: 100dvh) {
+    --overlay-height: 100dvh;
+  }
 
   position: fixed;
   display: flex;