mirror of
https://github.com/Unleash/unleash.git
synced 2025-03-18 00:19:49 +01:00
fix: prevent long project names from blowing out the form (#7673)
This change prevents long project names from blowing the form out of proportion. To do so, it: 1. sets `whitespace: no-wrap` on the button labels. Judging by the other styles, this was the intention all along, but it didn't really come up until now. 2. It also sets the label width for projects to 30ch,so that you'll get to see quite a bit of the project name before it gets cut off. It would be possible to set a dynamic width for this button based on the longest project name, but I'm not sure it adds much value, so I'm leaning towards keeping it simple. Here's what the dynamic width would look like: ``` tsx const projectButtonLabelWidth = useMemo(() => { const longestProjectName = projects.reduce( (prev: number, type: { name: string }) => prev >= type.name.length ? prev : type.name.length, 0, ); return `${Math.min(longestProjectName, 30)}ch`; }, [projects]); ``` What it looks like: 
This commit is contained in:
parent
c0d7be040d
commit
c7bb6c5179
@ -20,6 +20,7 @@ export const ButtonLabel = styled('span', {
|
||||
width: labelWidth || 'unset',
|
||||
overflowX: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: 'max-content',
|
||||
},
|
||||
|
@ -258,7 +258,7 @@ export const CreateFeatureDialog = ({
|
||||
label:
|
||||
currentProjectName ?? project,
|
||||
icon: configButtonData.project.icon,
|
||||
labelWidth: '12ch',
|
||||
labelWidth: '30ch',
|
||||
}}
|
||||
search={{
|
||||
label: 'Filter projects',
|
||||
|
Loading…
Reference in New Issue
Block a user