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>
Unleash · Apr 2, 2024 · e797018 · e797018
1 parent d0622f1
commit e797018
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/...n/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx b/...n/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/...ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/...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>