fix(modal): fix height constraint of modal

mochi-sann · Jun 22, 2020 · 36f6580 · 36f6580
1 parent 89c4bf1
commit 36f6580
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 7 deletions.
diff --git a/components/modal/modal-actions.tsx b/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>
     </>

diff --git a/components/modal/modal-content.tsx b/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) {

diff --git a/components/modal/modal-title.tsx b/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;

diff --git a/components/modal/modal-wrapper.tsx b/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;

diff --git a/components/modal/modal.tsx b/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>}

diff --git a/components/shared/backdrop.tsx b/components/shared/backdrop.tsx
@@ -7,7 +7,6 @@ import useCurrentState from '../utils/use-current-state'
 interface Props {
   onClick?: (event: MouseEvent<HTMLElement>) => void
   visible?: boolean
-  offsetY?: number
 }
 
 const defaultProps = {
@@ -19,7 +18,7 @@ const defaultProps = {
 export type BackdropProps = Props & typeof defaultProps
 
 const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
-  ({ children, onClick, visible, offsetY }) => {
+  ({ children, onClick, visible }) => {
     const theme = useTheme()
     const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false)
     const clickHandler = (event: MouseEvent<HTMLElement>) => {
@@ -57,7 +56,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
               align-content: center;
               align-items: center;
               flex-direction: column;
-              justify-content: center;
+              justify-content: space-around;
               height: 100vh;
               width: 100vw;
               overflow: auto;
@@ -74,8 +73,9 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
             }
 
             .offset {
-              height: ${offsetY}vh;
+              height: 0;
               opacity: 0;
+              display: flex;
               background-color: transparent;
             }
-Original file line number
+Diff line change
@@ Expand Up @@
             div {
               height: 3.625rem;
+              flex-shrink: 0;
             }
           `}</style>
         </>
@@ Expand Down @@