From c7bb6c517980bfe1e5ca752e46d63f8a088aaf7f Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 26 Jul 2024 11:39:43 +0200
Subject: [PATCH] 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)
---
 .../DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx    | 1 +
 .../ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx
index 1233b3e617..8e5b7df8c7 100644
--- a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx
@@ -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',
     },
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index b354d77f68..1567084ada 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -258,7 +258,7 @@ export const CreateFeatureDialog = ({
                                             label:
                                                 currentProjectName ?? project,
                                             icon: configButtonData.project.icon,
-                                            labelWidth: '12ch',
+                                            labelWidth: '30ch',
                                         }}
                                         search={{
                                             label: 'Filter projects',