From 691a9e6e574c7d91836bc20f17dfe1d778c6a210 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 30 Apr 2025 10:37:16 +0200 Subject: [PATCH] fix: appropriately size case icon for non-editing constraints (#9869) This fixes an issue where the "case sensitive" chip for existing constraints was way too big. The underlying reason is that I switched the icon for one with more padding to give it a consistent size with the "not case sensitive" icon (PR: https://github.com/Unleash/unleash/pull/9851). The fix here is: 1. Add a viewBox to the SVG to let it scale properly. 2. Make the containing box stretch to fill the height of it's flex container. 3. Use a size for height that doesn't grow too large. Before: image After: image --- frontend/src/assets/icons/case-sensitive.svg | 2 +- .../ConstraintItemHeader/ConstraintItemHeader.tsx | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/assets/icons/case-sensitive.svg b/frontend/src/assets/icons/case-sensitive.svg index 2a1193a784..1fabae8fb0 100644 --- a/frontend/src/assets/icons/case-sensitive.svg +++ b/frontend/src/assets/icons/case-sensitive.svg @@ -1 +1 @@ - + diff --git a/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx index cc3cba85eb..8109cc43ab 100644 --- a/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx +++ b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx @@ -26,8 +26,16 @@ const Operator: FC<{ const StrategyEvalChipLessInlinePadding = styled(StrategyEvaluationChip)( ({ theme }) => ({ + alignSelf: 'stretch', + height: 'auto', + padding: 0, '> span': { - paddingInline: theme.spacing(0.5), + paddingInline: theme.spacing(0), + }, + svg: { + '--size': theme.spacing(2.5), + width: 'var(--size)', + height: 'var(--size)', }, }), );