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

superset-frontend/src/components/Modal/Modal.tsx

@@ -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;