fix: Prevent backdrop from scrolling away (#106)

* fix: Prevent backdrop from scrolling away * fix: Add max-height to ModalContent and ModalBody to enable scrolling within the Modal
heydoctor · May 11, 2020 · b5a285d · b5a285d
1 parent 4e8ba5a
commit b5a285d
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
@@ -34,7 +34,7 @@ const ModalContainer = createComponent({
 const Backdrop = createComponent({
   name: 'ModalBackdrop',
   style: ({ transitionState }) => css`
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -68,6 +68,7 @@ const ModalContent = createComponent({
     background-clip: padding-box;
     box-shadow: ${theme.shadow.hard};
     border-radius: ${themeGet('radius')}px;
+    max-height: 90vh;
 
     ${transitionState === 'entering' &&
       css`
@@ -223,6 +224,8 @@ Modal.Body = createComponent({
   name: 'ModalBody',
   style: css`
     padding: 1.25rem;
+    height: calc(90vh - 105px);
+    overflow-y: auto;
   `,
 });