diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
index 0d13b14055..563f3a0876 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
@@ -7,16 +7,20 @@ export const StyledContainer = styled('div')(({ theme }) => ({
     background: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
+    transition: 'all 0.1s ease-in-out',
 
     '&:hover': {
-        border: `1px solid ${theme.palette.primary.main}`,
+        borderColor: theme.palette.primary.main,
     },
 }));
 
 export const StyledValue = styled('div')(({ theme }) => ({
     lineHeight: 1.33,
     fontSize: theme.fontSizes.smallBody,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
 }));
+
 export const StyledDescription = styled('div')(({ theme }) => ({
     lineHeight: 1.33,
     fontSize: theme.fontSizes.smallerBody,
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
index 022f90d0ff..d77ff61d1b 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
@@ -27,13 +27,18 @@ export const LegalValueLabel = ({
             <FormControlLabel
                 value={value || legal.value}
                 control={control}
-                sx={{ width: '100%' }}
+                sx={{
+                    width: '100%',
+                    overflowX: 'hidden',
+                }}
                 label={
                     <>
                         <StyledValue>
-                            <Highlighter search={filter}>
-                                {legal.value}
-                            </Highlighter>
+                            <Truncator title={legal.value} arrow lines={1}>
+                                <Highlighter search={filter}>
+                                    {legal.value}
+                                </Highlighter>
+                            </Truncator>
                         </StyledValue>
                         <StyledDescription>
                             <Truncator
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index daae49cc45..cfeca39f99 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -52,7 +52,7 @@ export const getIllegalValues = (
 
 const StyledValuesContainer = styled('div')(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, 120px)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
     gap: theme.spacing(1),
     padding: theme.spacing(2),
     border: `1px solid ${theme.palette.divider}`,
@@ -60,6 +60,15 @@ const StyledValuesContainer = styled('div')(({ theme }) => ({
     maxHeight: '378px',
     overflow: 'auto',
 }));
+
+const StyledChipList = styled('ul')(({ theme }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    listStyle: 'none',
+    gap: theme.spacing(1),
+    padding: theme.spacing(2),
+}));
+
 const StyledStack = styled(Stack)(({ theme }) => ({
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(0.5),
@@ -185,19 +194,22 @@ export const RestrictiveLegalValues = ({
                                 Boolean(values)
                             }
                             show={
-                                <StyledValuesContainer
+                                <StyledChipList
                                     sx={{ border: 0, paddingTop: 0 }}
                                 >
                                     {values.map((value) => {
                                         return (
-                                            <Chip
-                                                key={value}
-                                                label={value}
-                                                onDelete={() => onChange(value)}
-                                            />
+                                            <li key={value}>
+                                                <Chip
+                                                    label={value}
+                                                    onDelete={() =>
+                                                        onChange(value)
+                                                    }
+                                                />
+                                            </li>
                                         );
                                     })}
-                                </StyledValuesContainer>
+                                </StyledChipList>
                             }
                         />
                     </>