1
0
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:

![image](https://github.com/user-attachments/assets/51bca3f6-aeb3-4a41-b57e-5ebd9baa3ef6)
This commit is contained in:
Thomas Heartman 2024-07-26 11:39:43 +02:00 committed by GitHub
parent c0d7be040d
commit c7bb6c5179
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 2 additions and 1 deletions

View File

@ -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',
},

View File

@ -258,7 +258,7 @@ export const CreateFeatureDialog = ({
label:
currentProjectName ?? project,
icon: configButtonData.project.icon,
labelWidth: '12ch',
labelWidth: '30ch',
}}
search={{
label: 'Filter projects',