From c47154b93960bef62b2ba42c10511cbc85414ce2 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 22 May 2024 13:24:42 +0200 Subject: [PATCH] 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. --- .../common/FormTemplate/FormTemplate.tsx | 4 +-- .../CreateProjectDialog.tsx | 1 + .../EditProject/DeleteProjectForm.tsx | 36 +++++++++++-------- .../EditProject/UpdateEnterpriseSettings.tsx | 2 +- .../Settings/EditProject/UpdateProject.tsx | 29 +++++++-------- 5 files changed, 39 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx index 4ab109d196..90e65bc826 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx +++ b/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, diff --git a/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx index 0c7b8b9dc8..bea4b15afe 100644 --- a/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx +++ b/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx @@ -118,6 +118,7 @@ export const CreateProjectDialogue = ({ return ( ({ + borderRadius: theme.spacing(2), + overflow: 'hidden', +})); interface IDeleteProjectForm { featureCount: number; @@ -17,19 +23,21 @@ export const DeleteProjectForm = ({ featureCount }: IDeleteProjectForm) => { }; return ( - - - + + + + + ); }; diff --git a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateEnterpriseSettings.tsx b/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateEnterpriseSettings.tsx index 215d0ab1ab..3a3dfb55ad 100644 --- a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateEnterpriseSettings.tsx +++ b/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} > diff --git a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx b/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx index 6f82fa80d2..b76f50dd13 100644 --- a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx +++ b/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 }>( - ({ theme, isPro }) => ({ +const StyledContainer = styled('div')(({ theme }) => ({ + 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 ( - +