From 3aa7e89a3e3f4a448c28c01803ef2ff462826cb4 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 29 May 2024 08:37:52 +0200
Subject: [PATCH] chore: fix button design on narrow screens for new project
 form (#7195)

This PR contains a few fixes for button designs on small screens for the
new project form.

It makes all buttons (config and actions) full-width and addresses some
sizing stuff.

It also caps the width of the stickiness button on non-small screens to
avoid shifting.




![image](https://github.com/Unleash/unleash/assets/17786332/83af0a1c-8eb0-4a6b-aa5c-491bbcfab8e9)
---
 .../ConfigButtons/ConfigButton.styles.tsx     |  7 ++++++-
 .../CreateProjectDialog.tsx                   |  6 +-----
 .../NewProjectForm.styles.tsx                 | 19 +++++++++++++++++++
 .../NewCreateProjectForm/NewProjectForm.tsx   |  1 +
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
index 14be4832f9..5a71b39b6e 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
@@ -22,6 +22,11 @@ export const HiddenDescription = styled('p')(() => ({
 
 export const ButtonLabel = styled('span', {
     shouldForwardProp: (prop) => prop !== 'labelWidth',
-})<{ labelWidth?: string }>(({ labelWidth }) => ({
+})<{ labelWidth?: string }>(({ labelWidth, theme }) => ({
     width: labelWidth || 'unset',
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    [theme.breakpoints.down('sm')]: {
+        width: 'max-content',
+    },
 }));
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
index e1b2111a17..05d747f3a5 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
@@ -33,10 +33,6 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({
 
 const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN';
 
-const StyledButton = styled(Button)(({ theme }) => ({
-    marginLeft: theme.spacing(3),
-}));
-
 const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
     fill: theme.palette.common.white,
     stroke: theme.palette.common.white,
@@ -166,7 +162,7 @@ export const CreateProjectDialog = ({
                     overrideDocumentation={setDocumentation}
                     clearDocumentationOverride={clearDocumentationOverride}
                 >
-                    <StyledButton onClick={onClose}>Cancel</StyledButton>
+                    <Button onClick={onClose}>Cancel</Button>
                     <CreateButton
                         name='project'
                         permission={CREATE_PROJECT}
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx
index 8bc7d6dad9..5e4da3427e 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx
@@ -50,6 +50,15 @@ export const OptionButtons = styled(StyledFormSection)(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row wrap',
     gap: theme.spacing(2),
+    [theme.breakpoints.down('sm')]: {
+        flexFlow: 'column nowrap',
+        'div:has(button)': {
+            display: 'flex',
+            button: {
+                flex: 1,
+            },
+        },
+    },
 }));
 
 export const FormActions = styled(StyledFormSection)(({ theme }) => ({
@@ -57,4 +66,14 @@ export const FormActions = styled(StyledFormSection)(({ theme }) => ({
     gap: theme.spacing(5),
     justifyContent: 'flex-end',
     flexFlow: 'row wrap',
+    [theme.breakpoints.down('sm')]: {
+        flexFlow: 'column nowrap',
+        gap: theme.spacing(2),
+        '& > *': {
+            display: 'flex',
+            button: {
+                flex: 1,
+            },
+        },
+    },
 }));
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
index 5c22df7568..a1edb0f92e 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
@@ -217,6 +217,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
                     button={{
                         label: projectStickiness,
                         icon: <StickinessIcon />,
+                        labelWidth: '12ch',
                     }}
                     search={{
                         label: 'Filter stickiness options',