fix: wrap env data before truncating env name. (#9733)

Solves an issue where the new buttons would potentially obscure the
entire name of the env:


![image](https://github.com/user-attachments/assets/0bb1e7e9-90da-414e-bd70-eef264ac1867)

 
Now, instead of using grid and container queries to find the right point
to break, we're using flex to always wrap before needing to truncate the
environment name. The name will still truncate if necessary.

Why didn't we do this originally? I ... couldn't think of a way to make
flex work in a 2D layout, but the `width: 100%` property seems to do the
trick 😄


![image](https://github.com/user-attachments/assets/fa81bf5b-3be0-4afa-8fc3-7a5b5ffeeefc)

PS: the buttons only stack when they have to. They stay single-line for
as long as possible. (just in case you were wondering).
<img width="711" alt="image"
src="https://github.com/user-attachments/assets/a9f85118-5b72-4618-a91b-f05c9d520663"
/>

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

@@ -37,24 +37,19 @@ const StyledHeader = styled('header')(({ theme }) => ({
     color: theme.palette.text.primary,
     alignItems: 'center',
     minHeight: theme.spacing(8),
-    containerType: 'inline-size',
 }));
 
 const StyledHeaderTitle = styled('hgroup')(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr',
-    flexDirection: 'column',
+    display: 'flex',
+    flexFlow: 'row wrap',
     flex: 1,
     columnGap: theme.spacing(1),
-    '@container (max-width: 500px)': {
-        gridTemplateColumns: '1fr',
-    },
 }));
 
 const StyledHeaderTitleLabel = styled('p')(({ theme }) => ({
+    width: '100%',
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.text.secondary,
-    gridColumn: '1/-1',
 }));
 
 const StyledTruncator = styled(Truncator)(({ theme }) => ({