From 5b325568d14ba24ac50e078d7d7a4020b3f01acc Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Thu, 28 Mar 2024 13:07:04 +0200
Subject: [PATCH] Chore: context fields UI improvements when creating context
 field (#6714)

Styling adjustments based on
https://linear.app/unleash/issue/UNL-371/ui-improvement-createedit-context-field

- Remove maxWidth from container
- In ul - add maxHeight, padding and border and hide when :empty

Closes #
[UNL-371](https://linear.app/unleash/issue/UNL-371/ui-improvement-createedit-context-field)

Before:
![Screenshot 2024-03-28 at 11 46
12](https://github.com/Unleash/unleash/assets/104830839/8150fb96-0a5a-4fd8-988a-82a42da51faf)

After:
![Screenshot 2024-03-28 at 11 47
03](https://github.com/Unleash/unleash/assets/104830839/186b806c-4557-42a8-b119-22d1b781cc57)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../context/ContectFormChip/ContextFormChipList.tsx      | 9 ++++++++-
 .../src/component/context/ContextForm/ContextForm.tsx    | 8 ++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx b/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
index 5c5ced7124b..300d0c7e404 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
@@ -6,9 +6,16 @@ const StyledContainer = styled('ul')(({ theme }) => ({
     display: 'flex',
     flexWrap: 'wrap',
     gap: theme.spacing(1),
-    padding: 0,
+    padding: theme.spacing(2),
     margin: 0,
     marginBottom: '1rem !important',
+    maxHeight: '412px',
+    overflow: 'auto',
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: `1px solid ${theme.palette.divider}`,
+    '&:empty': {
+        display: 'none',
+    },
 }));
 
 export const ContextFormChipList: React.FC = StyledContainer;
diff --git a/frontend/src/component/context/ContextForm/ContextForm.tsx b/frontend/src/component/context/ContextForm/ContextForm.tsx
index e7a1ed3e6d9..4bab1740770 100644
--- a/frontend/src/component/context/ContextForm/ContextForm.tsx
+++ b/frontend/src/component/context/ContextForm/ContextForm.tsx
@@ -42,10 +42,6 @@ const StyledForm = styled('form')({
     height: '100%',
 });
 
-const StyledContainer = styled('div')({
-    maxWidth: '470px',
-});
-
 const StyledInputDescription = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(1),
 }));
@@ -159,7 +155,7 @@ export const ContextForm: React.FC<IContextForm> = ({
 
     return (
         <StyledForm onSubmit={onSubmit}>
-            <StyledContainer>
+            <div>
                 <StyledInputDescription>
                     What is your context name?
                 </StyledInputDescription>
@@ -266,7 +262,7 @@ export const ContextForm: React.FC<IContextForm> = ({
                     <Typography>{stickiness ? 'On' : 'Off'}</Typography>
                 </StyledSwitchContainer>
                 <ContextFieldUsage contextName={contextName} />
-            </StyledContainer>
+            </div>
             <StyledButtonContainer>
                 {children}
                 <StyledCancelButton onClick={onCancel}>