diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx index 8ef38a7e8dcde..c6d5b3ee0aac6 100644 --- a/superset-frontend/src/components/Modal/Modal.tsx +++ b/superset-frontend/src/components/Modal/Modal.tsx @@ -89,9 +89,20 @@ export const StyledModal = styled(BaseModal)` max-width: ${maxWidth ?? '900px'}; padding-left: ${theme.gridUnit * 3}px; padding-right: ${theme.gridUnit * 3}px; + padding-bottom: 0; + top: 0; `} + .ant-modal-content { + display: flex; + flex-direction: column; + max-height: ${({ theme }) => `calc(100vh - ${theme.gridUnit * 8}px)`}; + margin-bottom: ${({ theme }) => theme.gridUnit * 4}px; + margin-top: ${({ theme }) => theme.gridUnit * 4}px; + } + .ant-modal-header { + flex: 0 0 auto; background-color: ${({ theme }) => theme.colors.grayscale.light4}; border-radius: ${({ theme }) => theme.borderRadius}px ${({ theme }) => theme.borderRadius}px 0 0; @@ -119,11 +130,13 @@ export const StyledModal = styled(BaseModal)` } .ant-modal-body { + flex: 0 1 auto; padding: ${({ theme }) => theme.gridUnit * 4}px; overflow: auto; ${({ resizable, height }) => !resizable && height && `height: ${height};`} } .ant-modal-footer { + flex: 0 0 1; border-top: ${({ theme }) => theme.gridUnit / 4}px solid ${({ theme }) => theme.colors.grayscale.light2}; padding: ${({ theme }) => theme.gridUnit * 4}px;