fix: wrap env header grid on narrow containers (#9596)

When the container is <500px, make it so that the strategy count wraps
onto its own line to prevent it from obscuring the environment name.

I decided to go for 500px because that allows our default names to not
get cut off before wrapping. It seems like a sensible default.

Before:

![image](https://github.com/user-attachments/assets/7fdec179-6053-4803-9bc0-8e48cedf3636)


After:


![image](https://github.com/user-attachments/assets/64728d51-5f9a-415e-84d1-a7708c039809)

It's still not perfect when you have envs without strategies, but it's
better. We'll get back to that edge case later.

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx

@@ -17,9 +17,6 @@ const StyledAccordionSummary = styled(AccordionSummary, {
     padding: theme.spacing(0.5, 3, 0.5, 2),
     display: 'flex',
     alignItems: 'center',
-    [theme.breakpoints.down('sm')]: {
-        fontWeight: 'bold',
-    },
     '&&&': {
         cursor: expandable ? 'pointer' : 'default',
     },
@@ -33,6 +30,7 @@ const StyledHeader = styled('header')(({ theme }) => ({
     color: theme.palette.text.primary,
     alignItems: 'center',
     minHeight: theme.spacing(8),
+    containerType: 'inline-size',
 }));
 
 const StyledHeaderTitle = styled('hgroup')(({ theme }) => ({
@@ -41,6 +39,9 @@ const StyledHeaderTitle = styled('hgroup')(({ theme }) => ({
     flexDirection: 'column',
     flex: 1,
     columnGap: theme.spacing(1),
+    '@container (max-width: 500px)': {
+        gridTemplateColumns: '1fr',
+    },
 }));
 
 const StyledHeaderTitleLabel = styled('p')(({ theme }) => ({