mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +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