mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
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:
parent
0d2e42229e
commit
c8fe518a7b
@ -89,9 +89,20 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
|
|||||||
max-width: ${maxWidth ?? '900px'};
|
max-width: ${maxWidth ?? '900px'};
|
||||||
padding-left: ${theme.gridUnit * 3}px;
|
padding-left: ${theme.gridUnit * 3}px;
|
||||||
padding-right: ${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 {
|
.ant-modal-header {
|
||||||
|
flex: 0 0 auto;
|
||||||
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
||||||
border-radius: ${({ theme }) => theme.borderRadius}px
|
border-radius: ${({ theme }) => theme.borderRadius}px
|
||||||
${({ theme }) => theme.borderRadius}px 0 0;
|
${({ theme }) => theme.borderRadius}px 0 0;
|
||||||
@ -119,11 +130,13 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
|
flex: 0 1 auto;
|
||||||
padding: ${({ theme }) => theme.gridUnit * 4}px;
|
padding: ${({ theme }) => theme.gridUnit * 4}px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
${({ resizable, height }) => !resizable && height && `height: ${height};`}
|
${({ resizable, height }) => !resizable && height && `height: ${height};`}
|
||||||
}
|
}
|
||||||
.ant-modal-footer {
|
.ant-modal-footer {
|
||||||
|
flex: 0 0 1;
|
||||||
border-top: ${({ theme }) => theme.gridUnit / 4}px solid
|
border-top: ${({ theme }) => theme.gridUnit / 4}px solid
|
||||||
${({ theme }) => theme.colors.grayscale.light2};
|
${({ theme }) => theme.colors.grayscale.light2};
|
||||||
padding: ${({ theme }) => theme.gridUnit * 4}px;
|
padding: ${({ theme }) => theme.gridUnit * 4}px;
|
||||||
|
Loading…
Reference in New Issue
Block a user