fix: revert form section 100 height (#3345)

Small fix that reverts https://github.com/Unleash/unleash/pull/3335/files#r1138829014 - Turns out it wasn't totally harmless and broke some modals that had more than 100% height and no overflow. This approach maintains the original logic and adds a new prop for the segment forms to make them proper modals when used in the project context.
Unleash · Mar 17, 2023 · 71f6b8e · 71f6b8e
1 parent c68f003
commit 71f6b8e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -34,7 +34,6 @@ const StyledContainer = styled('section', {
     minHeight: modal ? '100vh' : '80vh',
     borderRadius: modal ? 0 : theme.spacing(2),
     width: '100%',
-    height: '100%',
     display: 'flex',
     margin: '0 auto',
     [theme.breakpoints.down(1100)]: {

diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
@@ -41,7 +41,7 @@ export const ProjectSegments = () => {
                         onClose={() => navigate(GO_BACK)}
                         label="Create segment"
                     >
-                        <CreateSegment />
+                        <CreateSegment modal />
                     </SidebarModal>
                 }
             />
@@ -53,7 +53,7 @@ export const ProjectSegments = () => {
                         onClose={() => navigate(GO_BACK)}
                         label="Edit segment"
                     >
-                        <EditSegment />
+                        <EditSegment modal />
                     </SidebarModal>
                 }
             />

diff --git a/frontend/src/component/segments/CreateSegment/CreateSegment.tsx b/frontend/src/component/segments/CreateSegment/CreateSegment.tsx
@@ -18,7 +18,11 @@ import { SEGMENT_CREATE_BTN_ID } from 'utils/testIds';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
-export const CreateSegment = () => {
+interface ICreateSegmentProps {
+    modal?: boolean;
+}
+
+export const CreateSegment = ({ modal }: ICreateSegmentProps) => {
     const projectId = useOptionalPathParam('projectId');
     const { uiConfig } = useUiConfig();
     const { setToastData, setToastApiError } = useToast();
@@ -87,6 +91,7 @@ export const CreateSegment = () => {
     return (
         <FormTemplate
             loading={loading}
+            modal={modal}
             title="Create segment"
             description={segmentsFormDescription}
             documentationLink={segmentsDocsLink}

diff --git a/frontend/src/component/segments/EditSegment/EditSegment.tsx b/frontend/src/component/segments/EditSegment/EditSegment.tsx
@@ -20,7 +20,11 @@ import { SEGMENT_SAVE_BTN_ID } from 'utils/testIds';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
-export const EditSegment = () => {
+interface IEditSegmentProps {
+    modal?: boolean;
+}
+
+export const EditSegment = ({ modal }: IEditSegmentProps) => {
     const projectId = useOptionalPathParam('projectId');
     const segmentId = useRequiredPathParam('segmentId');
     const { segment } = useSegment(Number(segmentId));
@@ -91,6 +95,7 @@ export const EditSegment = () => {
     return (
         <FormTemplate
             loading={loading}
+            modal={modal}
             title="Edit segment"
             description={segmentsFormDescription}
             documentationLink={segmentsDocsLink}