From e43109a2cb692a0d67504f709d57ac2fb888645a Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 16 Jul 2024 10:47:46 +0200 Subject: [PATCH] fix: prevent long names from breaking form layouts (#7591) This PR fixes a couple instances where long resource names would break form and input layouts. I've added comments to the various files to explain what they're doing and why. ## Discussion point: I've now set the width of project selector to be as narrow as it can with wrapped text. In the main interfaces, it's much better, but on the page where you can move a flag, it is quite narrow. However, I still think it's better (no chance of it being wider than the whole screen). We might want to find another way, but regardless, it'll only show up with real edge cases. ## Fixes (screenies) ### API token creation form **Files**: - `frontend/src/component/common/FormTemplate/FormTemplate.styles.ts` - `frontend/src/component/common/FormTemplate/FormTemplate.tsx` Before: ![image](https://github.com/user-attachments/assets/cef31208-2cce-479e-902e-ed7d3c3c9571) After: ![image](https://github.com/user-attachments/assets/b0832193-11f5-427d-9df1-d9baca0a91e7) ### New feature flag form **Files**: - `frontend/src/component/common/GeneralSelect/GeneralSelect.tsx` Before: ![image](https://github.com/user-attachments/assets/2ac6f791-af19-4f7e-a8ea-2fc356f18fb2) After: ![image](https://github.com/user-attachments/assets/13b91812-c00a-49e8-9409-67fab4eaaf01) ### Project select popover **Files** - `frontend/src/component/common/GeneralSelect/GeneralSelect.tsx` - `frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx` Before: ![image](https://github.com/user-attachments/assets/e81a4cef-1402-4b9c-b1a8-c22493c794bd) After: ![image](https://github.com/user-attachments/assets/604dada9-6555-48e3-a81d-dda72bd9ccf0) But also: ![image](https://github.com/user-attachments/assets/7e935fe5-b7f0-4674-8d94-a8c8a6176a3c) --- .../FormTemplate/FormTemplate.styles.ts | 8 +++++++- .../common/FormTemplate/FormTemplate.tsx | 19 ++++++++++++++----- .../common/GeneralSelect/GeneralSelect.tsx | 16 ++++++++++++++-- .../FeatureProjectSelect.tsx | 3 +++ 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts index 59ea9178a2..31058135f6 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts +++ b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts @@ -1 +1,7 @@ -export const formTemplateSidebarWidth = '36%'; +const sidebarWidthPercentage = 36; +const formWidthPercentage = 100 - sidebarWidthPercentage; + +export const formTemplateSidebarWidth = `${sidebarWidthPercentage}%`; +export const formTemplateFixedSidebarWidth = `420px`; + +export const formTemplateFormWidth = `${formWidthPercentage}%`; diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx index e3dad7f6d2..0e8cdec026 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx +++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx @@ -17,7 +17,11 @@ import useToast from 'hooks/useToast'; import React from 'react'; import { type ReactNode, useState } from 'react'; import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg'; -import { formTemplateSidebarWidth } from './FormTemplate.styles'; +import { + formTemplateFixedSidebarWidth, + formTemplateFormWidth, + formTemplateSidebarWidth, +} from './FormTemplate.styles'; import { relative } from 'themes/themeStyles'; interface ICreateProps { @@ -72,12 +76,14 @@ const StyledMobileGuidanceWrapper = styled('div', { : {}), })); -const StyledMain = styled('div')(({ theme }) => ({ +const StyledMain = styled('div', { + shouldForwardProp: (prop) => prop !== 'useFixedSidebar', +})<{ useFixedSidebar?: boolean }>(({ theme, useFixedSidebar }) => ({ display: 'flex', flexDirection: 'column', flexGrow: 1, flexShrink: 1, - width: '100%', + width: useFixedSidebar ? 'initial' : formTemplateFormWidth, [theme.breakpoints.down(1100)]: { width: '100%', }, @@ -313,7 +319,7 @@ const FormTemplate: React.FC = ({ } /> - + = (props) => { const FixedGuidance: React.FC = (props) => { return ( - + ); diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx index 856105a501..fbcb185567 100644 --- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx +++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx @@ -6,6 +6,7 @@ import { Select, type SelectProps, type SelectChangeEvent, + styled, } from '@mui/material'; import { SELECT_ITEM_ID } from 'utils/testIds'; import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined'; @@ -34,6 +35,10 @@ export interface IGeneralSelectProps extends Omit { visuallyHideLabel?: boolean; } +const StyledFormControl = styled(FormControl)({ + maxWidth: '100%', +}); + const GeneralSelect: React.FC = ({ name, value = '', @@ -54,7 +59,7 @@ const GeneralSelect: React.FC = ({ }; return ( - = ({ label={visuallyHideLabel ? '' : label} id={id} value={value} + MenuProps={{ + sx: { + '.MuiPopover-paper.MuiMenu-paper': { + width: 'min-content', + }, + }, + }} IconComponent={KeyboardArrowDownOutlined} {...rest} > @@ -90,7 +102,7 @@ const GeneralSelect: React.FC = ({ ))} - + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx index ea58a8fdab..00cf7d9bd2 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx @@ -30,6 +30,9 @@ const FeatureProjectSelect = ({ key: project.id, label: project.name, title: project.description, + sx: { + whiteSpace: 'pre-line', + }, }; };