pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(cosmetic): Limiting modal height (#20147) 

* more changes that didn't make it into the last commit somehow.

* Allow modals to be short, but reach a max height and scroll

* now with template literals
This commit is contained in:
Evan Rusackas 2022-05-27 10:51:03 -06:00 committed by GitHub
parent 0d2e42229e
commit c8fe518a7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
superset-frontend/src/components/Modal/Modal.tsx
View File

@ -89,9 +89,20 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
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)<StyledModalProps>`
}
.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;