fix(modal): fix height constraint of modal

components/modal/modal-actions.tsx

@@ -28,6 +28,7 @@ const ModalActions: React.FC<React.PropsWithChildren<{}>> = ({ children, ...prop
 
         div {
           height: 3.625rem;
+          flex-shrink: 0;
         }
       `}</style>
     </>

components/modal/modal-content.tsx

@@ -23,8 +23,9 @@ const ModalContent: React.FC<ModalContentProps> = ({ className, children, ...pro
       </div>
       <style jsx>{`
         .content {
-          margin: 0;
-          padding: ${theme.layout.gap} 0 ${theme.layout.gapHalf} 0;
+          margin: 0 -${theme.layout.gap};
+          padding: ${theme.layout.gap} ${theme.layout.gap} ${theme.layout.gapHalf};
+          overflow-y: auto;
         }
 
         .content > :global(*:first-child) {

components/modal/modal-title.tsx

@@ -29,6 +29,7 @@ const ModalTitle: React.FC<ModalTitleProps> = ({ className, children, ...props }
           text-align: center;
           margin: 0;
           display: inline-flex;
+          flex-shrink: 0;
           justify-content: center;
           align-items: center;
           word-break: break-word;

components/modal/modal-wrapper.tsx

@@ -32,6 +32,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
         <style jsx>{`
           .wrapper {
             max-width: 85vw;
+            max-height: 75vh;
             width: ${width};
             overflow: hidden;
             display: flex;

components/modal/modal.tsx

@@ -80,7 +80,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   if (!portal) return null
   return createPortal(
     <ModalContext.Provider value={modalConfig}>
-      <Backdrop onClick={closeFromBackdrop} visible={visible} offsetY={25}>
+      <Backdrop onClick={closeFromBackdrop} visible={visible}>
         <ModalWrapper visible={visible} className={wrapClassName} width={wrapperWidth}>
           {withoutActionsChildren}
           {hasActions && <ModalActions>{ActionsChildren}</ModalActions>}