Skip to content

Commit 243088f

Browse files
fix: Add strategy and more strategies button are different heights (#9300)
Fixes the height discrepancy between add strategy and more strategies buttons, both with and without the flag enabled. The essence of the fix is to make the "more strategies" button's height dynamic and grow to match the height of the other button. Before (flag enabled): ![image](https://github.com/user-attachments/assets/4dda44b3-3add-40cd-93ed-48150e73ac35) After (flag enabled): ![image](https://github.com/user-attachments/assets/2788f141-fe64-4733-9202-f9f115396001) Before (flag disabled): ![image](https://github.com/user-attachments/assets/c3a9d396-cb30-4a61-9400-45458189d3f2) After (flag disabled): ![image](https://github.com/user-attachments/assets/0570ff85-401a-4e6f-93e7-d1619a4cd848) As a bonus: also enables the ui font redesign flag for server-dev. If you're very sharp-eyed, you might notice a few things: 1. There's more padding on the new button. This was done in concert with UX when we noticed there was more padding on other buttons. So as a result, we set the button type to the default instead of "small". 1. The kebab button isn't perfectly square with the flag on. There's a few issues here, but essentially: to use `aspect-ratio: 1`, you need either a height or a width set. Because we want everything here to be auto-generated (use the button's intrinsic height), I couldn't make it work. In the end, I think this is close enough. If you have other ideas, you're very welcome to try and fix it.
1 parent 151db95 commit 243088f

File tree

2 files changed

+13
-14
lines changed

2 files changed

+13
-14
lines changed

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

+12-14
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ interface IFeatureStrategyMenuProps {
2828
disableReason?: string;
2929
}
3030

31-
const StyledStrategyMenu = styled('div')({
31+
const StyledStrategyMenu = styled('div')(({ theme }) => ({
3232
flexShrink: 0,
33-
});
33+
display: 'flex',
34+
flexFlow: 'row',
35+
gap: theme.spacing(1),
36+
}));
3437

3538
const StyledAdditionalMenuButton = styled(PermissionButton)(({ theme }) => ({
3639
minWidth: 0,
3740
width: theme.spacing(4.5),
38-
alignItems: 'center',
39-
justifyContent: 'center',
40-
align: 'center',
41-
flexDirection: 'column',
42-
marginLeft: theme.spacing(1),
41+
alignSelf: 'stretch',
42+
paddingBlock: 0,
4343
}));
4444

4545
export const FeatureStrategyMenu = ({
@@ -64,6 +64,7 @@ export const FeatureStrategyMenu = ({
6464
const { addChange } = useChangeRequestApi();
6565
const { refetch: refetchChangeRequests } =
6666
usePendingChangeRequests(projectId);
67+
const uiFontSizeRedesign = useUiFlag('uiGlobalFontSize');
6768

6869
const onClose = () => {
6970
setAnchor(undefined);
@@ -120,7 +121,7 @@ export const FeatureStrategyMenu = ({
120121
onClick={openMoreStrategies}
121122
aria-labelledby={popoverId}
122123
variant={variant}
123-
size={size}
124+
size={uiFontSizeRedesign ? undefined : size}
124125
sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
125126
disabled={Boolean(disableReason)}
126127
tooltipProps={{
@@ -164,7 +165,7 @@ export const FeatureStrategyMenu = ({
164165
onClick={openDefaultStrategyCreationModal}
165166
aria-labelledby={popoverId}
166167
variant={variant}
167-
size={size}
168+
size={uiFontSizeRedesign ? undefined : size}
168169
sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
169170
disabled={Boolean(disableReason)}
170171
tooltipProps={{
@@ -179,18 +180,15 @@ export const FeatureStrategyMenu = ({
179180
projectId={projectId}
180181
environmentId={environmentId}
181182
onClick={openMoreStrategies}
182-
aria-labelledby={popoverId}
183183
variant='outlined'
184-
size={size}
184+
size={uiFontSizeRedesign ? undefined : size}
185185
hideLockIcon
186186
disabled={Boolean(disableReason)}
187187
tooltipProps={{
188188
title: disableReason ? disableReason : 'More strategies',
189189
}}
190190
>
191-
<MoreVert
192-
sx={(theme) => ({ margin: theme.spacing(0.25, 0) })}
193-
/>
191+
<MoreVert />
194192
</StyledAdditionalMenuButton>
195193
<Popover
196194
id={popoverId}

src/server-dev.ts

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ process.nextTick(async () => {
5959
frontendHeaderRedesign: true,
6060
dataUsageMultiMonthView: true,
6161
filterExistingFlagNames: true,
62+
uiGlobalFontSize: true,
6263
},
6364
},
6465
authentication: {

0 commit comments

Comments
 (0)