From c8fe518a7b55fe48545228dca6cf4f7c400f04e6 Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Fri, 27 May 2022 10:51:03 -0600
Subject: [PATCH] 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 | 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 8ef38a7e8d..c6d5b3ee0a 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)<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;