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)

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',
+    },
 }));

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}

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,
+            },
+        },
+    },
 }));

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