From 18cd0e2cdb0bd6bbf8d933fbebd719c442b282be Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 31 Dec 2024 08:45:17 +0100
Subject: [PATCH] fix: legal values styling in segments (#9044)

---
 .../LegalValueLabel/LegalValueLabel.styles.ts |  7 +++
 .../RestrictiveLegalValues.tsx                | 49 ++++++++++++-------
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
index 7586394e18..24cbc2b777 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
@@ -4,6 +4,13 @@ export const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'inline-block',
         wordBreak: 'break-word',
+        padding: theme.spacing(0.5, 1),
+        background: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        '&:hover': {
+            border: `1px solid ${theme.palette.primary.main}`,
+        },
     },
     value: {
         lineHeight: 1.33,
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index 521b06fc8a..dc04e1ace0 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, Checkbox } from '@mui/material';
+import { Alert, Checkbox, styled } from '@mui/material';
 import { useThemeStyles } from 'themes/themeStyles';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
@@ -49,6 +49,17 @@ export const getIllegalValues = (
     return constraintValues.filter((value) => deletedValuesSet.has(value));
 };
 
+const StyledValuesContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    padding: theme.spacing(2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusMedium,
+    maxHeight: '378px',
+    overflow: 'auto',
+}));
+
 export const RestrictiveLegalValues = ({
     data,
     values,
@@ -134,23 +145,25 @@ export const RestrictiveLegalValues = ({
                     />
                 }
             />
-            {filteredValues.map((match) => (
-                <LegalValueLabel
-                    key={match.value}
-                    legal={match}
-                    control={
-                        <Checkbox
-                            checked={Boolean(valuesMap[match.value])}
-                            onChange={() => onChange(match.value)}
-                            name={match.value}
-                            color='primary'
-                            disabled={deletedLegalValues
-                                .map(({ value }) => value)
-                                .includes(match.value)}
-                        />
-                    }
-                />
-            ))}
+            <StyledValuesContainer>
+                {filteredValues.map((match) => (
+                    <LegalValueLabel
+                        key={match.value}
+                        legal={match}
+                        control={
+                            <Checkbox
+                                checked={Boolean(valuesMap[match.value])}
+                                onChange={() => onChange(match.value)}
+                                name={match.value}
+                                color='primary'
+                                disabled={deletedLegalValues
+                                    .map(({ value }) => value)
+                                    .includes(match.value)}
+                            />
+                        }
+                    />
+                ))}
+            </StyledValuesContainer>
 
             <ConditionallyRender
                 condition={Boolean(error)}