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>

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;

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}>