From f23959e1a5db6e9b5dfcdbcaeb65e791afa0d566 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 20 Dec 2021 15:26:44 -0700 Subject: [PATCH 1/3] more changes that didn't make it into the last commit somehow. --- superset-frontend/src/components/Modal/Modal.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx index 389982cc2202..98e85079538b 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 100vh; 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; From 24d6d20b342270dad87d9e4caf1107d4e9bb4093 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 20 May 2022 11:22:33 -0600 Subject: [PATCH 2/3] Allow modals to be short, but reach a max height and scroll --- superset-frontend/src/components/Modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx index 98e85079538b..7c82f5b43d4f 100644 --- a/superset-frontend/src/components/Modal/Modal.tsx +++ b/superset-frontend/src/components/Modal/Modal.tsx @@ -130,7 +130,7 @@ export const StyledModal = styled(BaseModal)` } .ant-modal-body { - flex: 0 1 100vh; + flex: 0 1 auto; padding: ${({ theme }) => theme.gridUnit * 4}px; overflow: auto; ${({ resizable, height }) => !resizable && height && `height: ${height};`} From 0e1d78ce1b9bdfdad3742e22c7d010374f40d967 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 23 May 2022 11:25:16 -0600 Subject: [PATCH 3/3] now with template literals --- superset-frontend/src/components/Modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx index 7c82f5b43d4f..dc06b0396b5e 100644 --- a/superset-frontend/src/components/Modal/Modal.tsx +++ b/superset-frontend/src/components/Modal/Modal.tsx @@ -96,7 +96,7 @@ export const StyledModal = styled(BaseModal)` .ant-modal-content { display: flex; flex-direction: column; - max-height: ${({ theme }) => 'calc(100vh - ' + theme.gridUnit * 8 + 'px)'}; + max-height: ${({ theme }) => `calc(100vh - ${theme.gridUnit * 8}px)`}; margin-bottom: ${({ theme }) => theme.gridUnit * 4}px; margin-top: ${({ theme }) => theme.gridUnit * 4}px; }