fix: make dialog the right height and make it scroll if it's smaller (#7103)

I've marked the project creation dialog as "compact", so that it's only
as tall as it needs to be.

However, by default, compact forms don't scroll because they have
overflow set to hidden. This is a problem on very short windows. To get
around this, I've set overflow to unset on compact forms.

I've also removed `min-height: 0` which has some weird side effects on
the centered dialog. Instead, I'm setting `min-height` to `unset` if
it's compact.


![image](https://github.com/Unleash/unleash/assets/17786332/e7d5db52-32d3-47d9-b31f-c73a5bb8e00f)

This task also uncovered some inconsistencies and some borders that only
show up sometimes, so I've removed them too.

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -41,12 +41,12 @@ const StyledContainer = styled('section', {
     shouldForwardProp: (prop) =>
         !['modal', 'compact'].includes(prop.toString()),
 })<{ modal?: boolean; compact?: boolean }>(({ theme, modal, compact }) => ({
-    minHeight: modal ? '100vh' : compact ? 0 : '80vh',
+    minHeight: modal ? '100vh' : compact ? 'unset' : '80vh',
     borderRadius: modal ? 0 : theme.spacing(2),
     width: '100%',
     display: 'flex',
     margin: '0 auto',
-    overflow: modal ? 'unset' : 'hidden',
+    overflow: modal || compact ? 'unset' : 'hidden',
     [theme.breakpoints.down(1100)]: {
         flexDirection: 'column',
         minHeight: 0,

frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx

@@ -118,6 +118,7 @@ export const CreateProjectDialogue = ({
     return (
         <StyledDialog open={open} onClose={onClose}>
             <FormTemplate
+                compact
                 disablePadding
                 description={documentation}
                 documentationLink='https://docs.getunleash.io/reference/projects'

frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/DeleteProjectForm.tsx

@@ -3,6 +3,12 @@ import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { styled } from '@mui/material';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    borderRadius: theme.spacing(2),
+    overflow: 'hidden',
+}));
 
 interface IDeleteProjectForm {
     featureCount: number;
@@ -17,19 +23,21 @@ export const DeleteProjectForm = ({ featureCount }: IDeleteProjectForm) => {
     };
 
     return (
-        <FormTemplate
+        <StyledContainer>
-            loading={loading}
+            <FormTemplate
-            title='Delete project'
+                loading={loading}
-            description=''
+                title='Delete project'
-            documentationLink='https://docs.getunleash.io/reference/projects'
+                description=''
-            documentationLinkLabel='Projects documentation'
+                documentationLink='https://docs.getunleash.io/reference/projects'
-            formatApiCode={formatProjectDeleteApiCode}
+                documentationLinkLabel='Projects documentation'
-            compact
+                formatApiCode={formatProjectDeleteApiCode}
-            compactPadding
+                compact
-            showDescription={false}
+                compactPadding
-            showLink={false}
+                showDescription={false}
-        >
+                showLink={false}
-            <DeleteProject projectId={id} featureCount={featureCount} />
+            >
-        </FormTemplate>
+                <DeleteProject projectId={id} featureCount={featureCount} />
+            </FormTemplate>
+        </StyledContainer>
     );
 };

frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateEnterpriseSettings.tsx

@@ -17,7 +17,6 @@ import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectO
 const StyledContainer = styled('div')(({ theme }) => ({
     minHeight: 0,
     borderRadius: theme.spacing(2),
-    border: `1px solid ${theme.palette.divider}`,
     width: '100%',
     display: 'flex',
     margin: '0 auto',
@@ -151,6 +150,7 @@ export const UpdateEnterpriseSettings = ({
                 documentationLinkLabel='Projects documentation'
                 formatApiCode={formatProjectSettingsApiCode}
                 compactPadding
+                compact
                 showDescription={false}
                 showLink={false}
             >

frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx

@@ -19,21 +19,18 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { styled } from '@mui/material';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 
-const StyledContainer = styled('div')<{ isPro: boolean }>(
+const StyledContainer = styled('div')(({ theme }) => ({
-    ({ theme, isPro }) => ({
+    minHeight: 0,
+    borderRadius: theme.spacing(2),
+    width: '100%',
+    display: 'flex',
+    margin: '0 auto',
+    overflow: 'hidden',
+    [theme.breakpoints.down(1100)]: {
+        flexDirection: 'column',
         minHeight: 0,
-        borderRadius: theme.spacing(2),
+    },
-        border: isPro ? '0' : `1px solid ${theme.palette.divider}`,
+}));
-        width: '100%',
-        display: 'flex',
-        margin: '0 auto',
-        overflow: 'hidden',
-        [theme.breakpoints.down(1100)]: {
-            flexDirection: 'column',
-            minHeight: 0,
-        },
-    }),
-);
 
 const StyledFormContainer = styled('div')(({ theme }) => ({
     borderTop: `1px solid ${theme.palette.divider}`,
@@ -46,7 +43,7 @@ interface IUpdateProject {
 const EDIT_PROJECT_BTN = 'EDIT_PROJECT_BTN';
 export const UpdateProject = ({ project }: IUpdateProject) => {
     const id = useRequiredPathParam('projectId');
-    const { uiConfig, isPro } = useUiConfig();
+    const { uiConfig } = useUiConfig();
     const { setToastData, setToastApiError } = useToast();
     const { defaultStickiness } = useDefaultProjectSettings(id);
     const { trackEvent } = usePlausibleTracker();
@@ -110,7 +107,7 @@ export const UpdateProject = ({ project }: IUpdateProject) => {
     };
 
     return (
-        <StyledContainer isPro={isPro()}>
+        <StyledContainer>
             <FormTemplate
                 loading={loading}
                 title='General settings'