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.

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

@@ -28,18 +28,18 @@ interface IFeatureStrategyMenuProps {
     disableReason?: string;
 }
 
-const StyledStrategyMenu = styled('div')({
+const StyledStrategyMenu = styled('div')(({ theme }) => ({
     flexShrink: 0,
-});
+    display: 'flex',
+    flexFlow: 'row',
+    gap: theme.spacing(1),
+}));
 
 const StyledAdditionalMenuButton = styled(PermissionButton)(({ theme }) => ({
     minWidth: 0,
     width: theme.spacing(4.5),
-    alignItems: 'center',
-    justifyContent: 'center',
-    align: 'center',
-    flexDirection: 'column',
-    marginLeft: theme.spacing(1),
+    alignSelf: 'stretch',
+    paddingBlock: 0,
 }));
 
 export const FeatureStrategyMenu = ({
@@ -64,6 +64,7 @@ export const FeatureStrategyMenu = ({
     const { addChange } = useChangeRequestApi();
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(projectId);
+    const uiFontSizeRedesign = useUiFlag('uiGlobalFontSize');
 
     const onClose = () => {
         setAnchor(undefined);
@@ -120,7 +121,7 @@ export const FeatureStrategyMenu = ({
                     onClick={openMoreStrategies}
                     aria-labelledby={popoverId}
                     variant={variant}
-                    size={size}
+                    size={uiFontSizeRedesign ? undefined : size}
                     sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
                     disabled={Boolean(disableReason)}
                     tooltipProps={{
@@ -164,7 +165,7 @@ export const FeatureStrategyMenu = ({
                 onClick={openDefaultStrategyCreationModal}
                 aria-labelledby={popoverId}
                 variant={variant}
-                size={size}
+                size={uiFontSizeRedesign ? undefined : size}
                 sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
                 disabled={Boolean(disableReason)}
                 tooltipProps={{
@@ -179,18 +180,15 @@ export const FeatureStrategyMenu = ({
                 projectId={projectId}
                 environmentId={environmentId}
                 onClick={openMoreStrategies}
-                aria-labelledby={popoverId}
                 variant='outlined'
-                size={size}
+                size={uiFontSizeRedesign ? undefined : size}
                 hideLockIcon
                 disabled={Boolean(disableReason)}
                 tooltipProps={{
                     title: disableReason ? disableReason : 'More strategies',
                 }}
             >
-                <MoreVert
-                    sx={(theme) => ({ margin: theme.spacing(0.25, 0) })}
-                />
+                <MoreVert />
             </StyledAdditionalMenuButton>
             <Popover
                 id={popoverId}

src/server-dev.ts

@@ -59,6 +59,7 @@ process.nextTick(async () => {
                         frontendHeaderRedesign: true,
                         dataUsageMultiMonthView: true,
                         filterExistingFlagNames: true,
+                        uiGlobalFontSize: true,
                     },
                 },
                 authentication: {