fix: only allow dialog content to be scrollable (#2071)

zesty-io · Jun 15, 2023 · 4f076d8 · 4f076d8
1 parent d74a90a
commit 4f076d8
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/src/apps/schema/src/app/components/AddFieldModal/ComingSoon.tsx b/src/apps/schema/src/app/components/AddFieldModal/ComingSoon.tsx
@@ -9,10 +9,7 @@ export const ComingSoon = () => {
       height="100%"
       justifyContent="center"
       alignItems="center"
-      position="absolute"
-      top={0}
-      left={0}
-      right={0}
+      minHeight={428}
     >
       <Box
         display="flex"

diff --git a/src/apps/schema/src/app/components/AddFieldModal/Learn.tsx b/src/apps/schema/src/app/components/AddFieldModal/Learn.tsx
@@ -12,7 +12,7 @@ export const Learn = ({ type }: Props) => {
   const data = FIELD_COPY_CONFIG[category]?.find((item) => item.type === type);
 
   return (
-    <Box data-cy="LearnTab">
+    <Box data-cy="LearnTab" minHeight={428}>
       <Box>
         <Typography variant="h5" fontWeight={600} mb={0.5}>
           {stringStartsWithVowel(TYPE_TEXT[type])

diff --git a/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx b/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx
@@ -50,6 +50,7 @@ export const MediaRules = ({
       display="flex"
       flexDirection="column"
       height="100%"
+      minHeight={428}
     >
       <Box
         display="flex"

diff --git a/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx b/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx
@@ -558,11 +558,23 @@ export const FieldForm = ({
         sx={{
           p: 2.5,
           position: "relative",
-          minHeight: "486px",
         }}
       >
         {activeTab === "details" && (
-          <Grid data-cy="DetailsTab" container spacing={2.5} maxWidth="480px">
+          <Grid
+            data-cy="DetailsTab"
+            container
+            spacing={2.5}
+            maxWidth="480px"
+            minHeight={448}
+            mt={-2.5} //Offset grid item default top padding
+            ml={0}
+            sx={{
+              "&.MuiGrid-container .MuiGrid-item": {
+                pl: 0,
+              },
+            }}
+          >
             {FORM_CONFIG[type]?.details?.map((fieldConfig, index) => {
               // Only show tooltip field when updating a field that already has a tooltip value
               const hideTooltipField =