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 = ({ return ( - +
What is your context name? @@ -266,7 +262,7 @@ export const ContextForm: React.FC = ({ {stickiness ? 'On' : 'Off'} - +
{children}