chore: reduce tab sizes on flag page + fix wrapping/overlapping issue with action buttons (#9339)

Reduces the size of the tab buttons on the flag page:
- Sets the min width to 100px instead of 160px on md screens. No change
for smaller screens
- Removes the min-height restriction imposed by theme.ts for the tab
bar, instead relying on the tab buttons to determine the height
(effectively changes the height from 70px to 62px).

Additionally: fixes an issue where the action buttons would overlap with
the tab buttons before wrapping and makes the tab bar scrollable. I can
no longer reproduce the issue where the action buttons force the tab bar
to be too small, but even if they should do that now, the tab bar is
scrollable so the remaining tabs are still accessible.

Because we only override the tabs' min-width on wider screens and mui
sets a default min-width, I changed the `onNarrowHeader` function to
`onWideHeader` and adjusted the other components accordingly. As a
bonus, the tab width and header wrapping now happens at the same time 🥳

After the change:

![image](https://github.com/user-attachments/assets/b164cc7d-ca96-4877-b507-cec9e00a2302)


## Accessibility

This PR also addresses some of the a11y issues with this tab bar, namely
that it adds an `aria-label`, as mentioned in the [MUI
docs](https://v5.mui.com/material-ui/react-tabs/#accessibility).

It does **not**, however, connect the tabs to their corresponding tab
panels. The main reason for this is that we're not using tab panels and
that they're spread over 4 different components. We're probably using
the tabs component for something it isn't really designed to do in this
way. (Arguably they should be links and not buttons, for instance.) I'm
not going to touch this now, because that would probably be a lot of
work and it's not something I expect the business would prioritize.

## Changing theme.ts

While it's tempting to go in and change the `min-height` in `theme.ts`,
that would potentially affect all the other tab bars we have (although
maybe not, because we set a different min height for the tabs
themselves), I want to leave that for now. There is apparently some work
being done/prepared for the tabs, so it's probably better to leave that
for then.

frontend/src/component/feature/FeatureView/FeatureViewHeader.tsx

@@ -53,38 +53,40 @@ const NewStyledHeader = styled('div')(({ theme }) => ({
     containerType: 'inline-size',
 }));
 
-const onNarrowHeader = (theme: Theme, css: object) => ({
-    '@container (max-width: 650px)': css,
+const onWideHeader = (theme: Theme, css: object) => ({
+    '@container (min-width: 650px)': css,
     '@supports not (container-type: inline-size)': {
-        [theme.breakpoints.down('md')]: css,
+        [theme.breakpoints.up('md')]: css,
     },
 });
 
 const UpperHeaderRow = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row wrap',
-    columnGap: theme.spacing(4),
     alignItems: 'center',
+    columnGap: theme.spacing(2),
 }));
 
 const LowerHeaderRow = styled(UpperHeaderRow)(({ theme }) => ({
     justifyContent: 'space-between',
-    flexFlow: 'row nowrap',
-    ...onNarrowHeader(theme, {
-        flexFlow: 'column nowrap',
-        alignItems: 'flex-start',
+    columnGap: 0,
+    flexFlow: 'column nowrap',
+    alignItems: 'flex-start',
+    ...onWideHeader(theme, {
+        alignItems: 'center',
+        flexFlow: 'row nowrap',
     }),
 }));
 
 const HeaderActions = styled('div', {
     shouldForwardProp: (propName) => propName !== 'showOnNarrowScreens',
 })<{ showOnNarrowScreens?: boolean }>(({ theme, showOnNarrowScreens }) => ({
-    display: showOnNarrowScreens ? 'none' : 'flex',
+    display: showOnNarrowScreens ? 'flex' : 'none',
     flexFlow: 'row nowrap',
     alignItems: 'center',
 
-    ...onNarrowHeader(theme, {
-        display: showOnNarrowScreens ? 'flex' : 'none',
+    ...onWideHeader(theme, {
+        display: showOnNarrowScreens ? 'none' : 'flex',
     }),
 }));
 
@@ -168,14 +170,24 @@ const StyledTabRow = styled('div')(({ theme }) => ({
     justifyContent: 'space-between',
 }));
 
+const StyledTabs = styled(Tabs)({
+    minWidth: 0,
+    maxWidth: '100%',
+    '& .MuiTabs-flexContainer': {
+        // remove the global min height set in frontend/src/themes/theme.ts
+        // (70px) and use the height of the tabs instead.
+        minHeight: 'unset',
+    },
+});
+
 const StyledTabButton = styled(Tab)(({ theme }) => ({
     textTransform: 'none',
     width: 'auto',
     fontSize: theme.fontSizes.bodySize,
     padding: '0 !important',
-    [theme.breakpoints.up('md')]: {
-        minWidth: 160,
-    },
+    ...onWideHeader(theme, {
+        minWidth: 100,
+    }),
 }));
 
 export const StyledLink = styled(Link)(() => ({
@@ -381,10 +393,12 @@ export const FeatureViewHeader: FC<Props> = ({ feature }) => {
                     </UpperHeaderRow>
                     <LowerHeaderRow>
                         <HeaderActionsInner showOnNarrowScreens />
-                        <Tabs
+                        <StyledTabs
                             value={activeTab.path}
                             indicatorColor='primary'
                             textColor='primary'
+                            aria-label='Feature flag tabs'
+                            variant='scrollable'
                         >
                             {tabData.map((tab) => (
                                 <StyledTabButton
@@ -395,7 +409,7 @@ export const FeatureViewHeader: FC<Props> = ({ feature }) => {
                                     data-testid={`TAB-${tab.title}`}
                                 />
                             ))}
-                        </Tabs>
+                        </StyledTabs>
                         <HeaderActionsInner />
                     </LowerHeaderRow>
                 </NewStyledHeader>