1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00

fix: segment spacing in strategy constraints (#9559)

This commit is contained in:
Tymoteusz Czech 2025-03-18 13:03:52 +01:00 committed by GitHub
parent c89cf196e7
commit 99fcdb1f23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 10 deletions

View File

@ -18,13 +18,7 @@ const StyledListItem = styled('li')(({ theme }) => ({
padding: theme.spacing(2, 3), padding: theme.spacing(2, 3),
display: 'flex', display: 'flex',
flexFlow: 'column', flexFlow: 'column',
gap: theme.spacing(1), gap: theme.spacing(2),
'&:has(>.MuiAccordion-root)': {
// todo: look at this later. MUI accordions rely heavily on their
// padding, but it doesn't collapse with the surrounding padding here,
// so they become super chunky otherwise.
paddingBlock: 0,
},
})); }));
const StyledAnd = styled('div')(({ theme }) => ({ const StyledAnd = styled('div')(({ theme }) => ({

View File

@ -27,6 +27,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
margin: 0, margin: 0,
padding: 0, padding: 0,
'::before': { '::before': {
// MUI separator between accordions
display: 'none', display: 'none',
}, },
})); }));
@ -34,10 +35,14 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
padding: 0, padding: 0,
fontSize: theme.typography.body2.fontSize, fontSize: theme.typography.body2.fontSize,
minHeight: 'unset',
'.MuiAccordionSummary-content, .MuiAccordionSummary-content.Mui-expanded': {
margin: 0,
},
})); }));
const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
padding: theme.spacing(0, 2, 3), padding: theme.spacing(2, 0, 1),
})); }));
const StyledLink = styled(Link)({ const StyledLink = styled(Link)({
@ -51,7 +56,8 @@ const StyledActionsContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: theme.spacing(2), marginTop: theme.spacing(-0.5),
marginBottom: theme.spacing(-0.5),
})); }));
const StyledButton = styled(Button)(({ theme }) => ({ const StyledButton = styled(Button)(({ theme }) => ({
@ -88,7 +94,7 @@ export const SegmentItem: FC<SegmentItemProps> = ({
}, [constraintList, segment.constraints]); }, [constraintList, segment.constraints]);
return ( return (
<StyledAccordion expanded={isOpen}> <StyledAccordion expanded={isOpen} disableGutters>
<StyledAccordionSummary id={`segment-accordion-${segment.id}`}> <StyledAccordionSummary id={`segment-accordion-${segment.id}`}>
<StrategyEvaluationItem type='Segment'> <StrategyEvaluationItem type='Segment'>
<StyledLink to={`/segments/edit/${segment.id}`}> <StyledLink to={`/segments/edit/${segment.id}`}>