From e7970186d0eb69a06375667b341a28327241e3fb Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Tue, 2 Apr 2024 09:35:11 +0300
Subject: [PATCH] Chore: semver constraint context fields improvements (#6730)

Increases the label width to make the whole box selectable
Adds a small gap to match the style

Closes #
[1-2233](https://linear.app/unleash/issue/1-2233/semver-constraint)


before:
![Screenshot 2024-03-28 at 14 19
39](https://github.com/Unleash/unleash/assets/104830839/bb4a0db7-4054-4c77-aa7f-5dabaff95b94)


after:
![Screenshot 2024-03-28 at 14 19
16](https://github.com/Unleash/unleash/assets/104830839/0dd6e56e-80c7-4771-ba84-93ad68484c8e)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../LegalValueLabel/LegalValueLabel.tsx       |  1 +
 .../SingleLegalValue/SingleLegalValue.tsx     | 54 ++++++++++++-------
 2 files changed, 35 insertions(+), 20 deletions(-)

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 142389eb3d..c3508fe349 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
@@ -24,6 +24,7 @@ export const LegalValueLabel = ({
             <FormControlLabel
                 value={legal.value}
                 control={control}
+                sx={{ width: '100%' }}
                 label={
                     <>
                         <StyledValue>
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
index e120d4c0ed..861aff745c 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useState } from 'react';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
-import { FormControl, RadioGroup, Radio, Alert } from '@mui/material';
+import { FormControl, RadioGroup, Radio, Alert, styled } from '@mui/material';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useThemeStyles } from 'themes/themeStyles';
@@ -26,6 +26,17 @@ interface ISingleLegalValueProps {
     constraintValue: string;
 }
 
+const StyledFieldsetContainer = 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 SingleLegalValue = ({
     setValue,
     value,
@@ -80,25 +91,28 @@ export const SingleLegalValue = ({
             <ConditionallyRender
                 condition={Boolean(legalValues.length)}
                 show={
-                    <FormControl component='fieldset'>
-                        <RadioGroup
-                            aria-label='selected-value'
-                            name='selected'
-                            value={value}
-                            onChange={(e) => {
-                                setError('');
-                                setValue(e.target.value);
-                            }}
-                        >
-                            {filteredValues.map((match) => (
-                                <LegalValueLabel
-                                    key={match.value}
-                                    legal={match}
-                                    control={<Radio />}
-                                />
-                            ))}
-                        </RadioGroup>
-                    </FormControl>
+                    <StyledFieldsetContainer>
+                        <FormControl component='fieldset'>
+                            <RadioGroup
+                                aria-label='selected-value'
+                                name='selected'
+                                value={value}
+                                sx={{ gap: (theme) => theme.spacing(0.5) }}
+                                onChange={(e) => {
+                                    setError('');
+                                    setValue(e.target.value);
+                                }}
+                            >
+                                {filteredValues.map((match) => (
+                                    <LegalValueLabel
+                                        key={match.value}
+                                        legal={match}
+                                        control={<Radio />}
+                                    />
+                                ))}
+                            </RadioGroup>
+                        </FormControl>
+                    </StyledFieldsetContainer>
                 }
                 elseShow={
                     <p>No valid legal values available for this operator.</p>