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.

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)]: {

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>
                 }
             />

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}

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}