fix(modal): fix typography and alignment on mobile (#382)

* fix(modal): fix layout of modal actions on safari mobile

* fix(modal): fix vertical alignment on safari mobile

* test(modal): update snapshots

* docs: hide menu when modal active

* docs(modal): add overlong case

components/modal/__tests__/__snapshots__/index.test.tsx.snap

@@ -18,9 +18,8 @@ exports[`Modal customization should be supported 1`] = `
         }
       </style><div tabindex=\\"0\\" class=\\"hide-tab\\" aria-hidden=\\"true\\"></div><style>
           .wrapper {
-            max-width: 90vw;
-            max-height: 90vh;
-            width: 100px;
+            max-width: 100%;
+            vertical-align: middle;
             overflow: hidden;
             display: flex;
             flex-direction: column;
@@ -87,13 +86,12 @@ exports[`Modal should render correctly 1`] = `
       </style><p class=\\"\\">This is a modal</p><style>
         p {
           font-size: 0.875rem;
-          line-height: 1.6;
           font-weight: normal;
+          display: inline-block;
+          line-height: 1.5rem;
+          height: 1.5rem;
           text-align: center;
           margin: 0;
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
           word-break: break-word;
           text-transform: uppercase;
           color: #666;
@@ -102,8 +100,8 @@ exports[`Modal should render correctly 1`] = `
         .content {
           margin: 0 -16pt;
           padding: 16pt 16pt 8pt;
-          overflow-y: auto;
           position: relative;
+          text-align: left;
         }
 
         .content > :global(*:first-child) {
@@ -262,9 +260,8 @@ exports[`Modal should render correctly 1`] = `
         }
       </style><div tabindex=\\"0\\" class=\\"hide-tab\\" aria-hidden=\\"true\\"></div><style>
           .wrapper {
-            max-width: 90vw;
-            max-height: 90vh;
-            width: 26rem;
+            max-width: 100%;
+            vertical-align: middle;
             overflow: hidden;
             display: flex;
             flex-direction: column;
@@ -309,36 +306,37 @@ exports[`Modal should render correctly 1`] = `
             height: 0;
             opacity: 0;
           }
-        </style></div></div><div class=\\"offset\\"></div><style>
+        </style></div></div><style>
             .backdrop {
               position: fixed;
               top: 0;
               left: 0;
-              display: flex;
-              align-content: center;
-              align-items: center;
-              flex-direction: column;
-              justify-content: center;
-              height: 100vh;
-              width: 100vw;
+              right: 0;
+              bottom: 0;
               overflow: auto;
               z-index: 1000;
+              -webkit-overflow-scrolling: touch;
+              box-sizing: border-box;
+              text-align: center;
             }
 
             .content {
-              display: flex;
-              align-items: center;
-              justify-content: center;
               position: relative;
               z-index: 1001;
               outline: none;
+              max-width: 90%;
+              width: 26rem;
+              margin: 20px auto;
+              vertical-align: middle;
+              display: inline-block;
             }
 
-            .offset {
-              height: 0;
-              opacity: 0;
-              display: flex;
-              background-color: transparent;
+            .backdrop:before {
+              display: inline-block;
+              width: 0;
+              height: 100%;
+              vertical-align: middle;
+              content: '';
             }
 
             .layer {

components/modal/modal-action.tsx

@@ -70,6 +70,7 @@ const ModalAction = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<
         flex: 1;
         height: 100%;
         border-radius: 0;
+        min-width: 0;
       }
       button.btn:hover,
       button.btn:focus {

components/modal/modal-content.tsx

@@ -25,8 +25,8 @@ const ModalContent: React.FC<ModalContentProps> = ({ className, children, ...pro
         .content {
           margin: 0 -${theme.layout.gap};
           padding: ${theme.layout.gap} ${theme.layout.gap} ${theme.layout.gapHalf};
-          overflow-y: auto;
           position: relative;
+          text-align: left;
         }
 
         .content > :global(*:first-child) {

components/modal/modal-subtitle.tsx

@@ -24,13 +24,12 @@ const ModalSubtitle: React.FC<ModalSubtitleProps> = ({ className, children, ...p
       <style jsx>{`
         p {
           font-size: 0.875rem;
-          line-height: 1.6;
           font-weight: normal;
+          display: inline-block;
+          line-height: 1.5rem;
+          height: 1.5rem;
           text-align: center;
           margin: 0;
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
           word-break: break-word;
           text-transform: uppercase;
           color: ${theme.palette.accents_5};

components/modal/modal-wrapper.tsx

@@ -6,7 +6,6 @@ import { isChildElement } from '../utils/collections'
 
 interface Props {
   className?: string
-  width?: string
   visible?: boolean
 }
 
@@ -19,7 +18,6 @@ export type ModalWrapperProps = Props & typeof defaultProps
 
 const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
   className,
-  width,
   children,
   visible,
   ...props
@@ -66,9 +64,8 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
         <div tabIndex={0} className="hide-tab" aria-hidden="true" ref={tabEnd} />
         <style jsx>{`
           .wrapper {
-            max-width: 90vw;
-            max-height: 90vh;
-            width: ${width};
+            max-width: 100%;
+            vertical-align: middle;
             overflow: hidden;
             display: flex;
             flex-direction: column;

components/modal/modal.tsx

@@ -41,7 +41,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   wrapClassName,
 }) => {
   const portal = usePortal('modal')
-  const [, setBodyHidden] = useBodyScroll()
+  const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true })
   const [visible, setVisible, visibleRef] = useCurrentState<boolean>(false)
   const [withoutActionsChildren, ActionsChildren] = pickChild(children, ModalAction)
   const hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0
@@ -80,8 +80,8 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   if (!portal) return null
   return createPortal(
     <ModalContext.Provider value={modalConfig}>
-      <Backdrop onClick={closeFromBackdrop} visible={visible}>
-        <ModalWrapper visible={visible} className={wrapClassName} width={wrapperWidth}>
+      <Backdrop onClick={closeFromBackdrop} visible={visible} width={wrapperWidth}>
+        <ModalWrapper visible={visible} className={wrapClassName}>
           {withoutActionsChildren}
           {hasActions && <ModalActions>{ActionsChildren}</ModalActions>}
         </ModalWrapper>