Fix modal layout issues.

apache · Aug 22, 2022 · 2310b03 · 2310b03
1 parent dc975d0
commit 2310b03
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/superset-frontend/src/components/Chart/DrillDetailModal.tsx b/superset-frontend/src/components/Chart/DrillDetailModal.tsx
@@ -28,8 +28,10 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
   BinaryQueryObjectFilterClause,
+  css,
   QueryFormData,
   t,
+  useTheme,
 } from '@superset-ui/core';
 import DrillDetailPane from 'src/dashboard/components/DrillDetailPane';
 import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
@@ -46,6 +48,7 @@ const DrillDetailModal: React.FC<{
   const openModal = useCallback(() => setShowModal(true), []);
   const closeModal = useCallback(() => setShowModal(false), []);
   const history = useHistory();
+  const theme = useTheme();
   const dashboardPageId = useContext(DashboardPageIdContext);
   const { slice_name: chartName } = useSelector(
     (state: { sliceEntities: { slices: Record<number, Slice> } }) =>
@@ -70,6 +73,12 @@ const DrillDetailModal: React.FC<{
 
   return (
     <Modal
+      css={css`
+        .ant-modal-body {
+          display: flex;
+          flex-direction: column;
+        }
+      `}
       show={showModal}
       onHide={closeModal}
       title={t('Drill to detail: %s', chartName)}
@@ -89,6 +98,14 @@ const DrillDetailModal: React.FC<{
       }
       responsive
       resizable
+      resizableConfig={{
+        minHeight: theme.gridUnit * 128,
+        minWidth: theme.gridUnit * 128,
+        defaultSize: {
+          width: 'auto',
+          height: '75vh',
+        },
+      }}
       draggable
       destroyOnClose
     >

diff --git a/superset-frontend/src/dashboard/components/DrillDetailPane/DrillDetailPane.tsx b/superset-frontend/src/dashboard/components/DrillDetailPane/DrillDetailPane.tsx
@@ -233,21 +233,17 @@ export default function DrillDetailPane({
         showRowCount={false}
         small
         css={css`
-          min-height: 0;
-          overflow: scroll;
+          overflow: auto;
+          .table {
+            margin-bottom: 0;
+          }
         `}
       />
     );
   }
 
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-        height: ${theme.gridUnit * 128}px;
-      `}
-    >
+    <>
       <TableControls
         filters={filters}
         setFilters={setFilters}
@@ -256,6 +252,6 @@ export default function DrillDetailPane({
         onReload={handleReload}
       />
       {tableContent}
-    </div>
+    </>
   );
 }
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -37,6 +37,7 @@ import {
   QueryFormData,
   styled,
   t,
+  useTheme,
 } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import { NoAnimationDropdown } from 'src/components/Dropdown';
@@ -171,6 +172,7 @@ const DashboardChartModalTrigger = ({
   const closeModal = useCallback(() => setShowModal(false), []);
   const history = useHistory();
   const exploreChart = () => history.push(exploreUrl);
+  const theme = useTheme();
 
   return (
     <>
@@ -184,6 +186,12 @@ const DashboardChartModalTrigger = ({
       </span>
       {(() => (
         <Modal
+          css={css`
+            .ant-modal-body {
+              display: flex;
+              flex-direction: column;
+            }
+          `}
           show={showModal}
           onHide={closeModal}
           title={modalTitle}
@@ -207,6 +215,14 @@ const DashboardChartModalTrigger = ({
           }
           responsive
           resizable
+          resizableConfig={{
+            minHeight: theme.gridUnit * 128,
+            minWidth: theme.gridUnit * 128,
+            defaultSize: {
+              width: 'auto',
+              height: '75vh',
+            },
+          }}
           draggable
           destroyOnClose
         >