From 01870c6165f8e63e2ef45560d2c2d22c38b217de Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 24 Mar 2025 10:52:38 +0100 Subject: [PATCH] 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. --- .../EnvironmentHeader/EnvironmentHeader.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx index 80d490b570..ae8c995512 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx +++ b/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 }) => ({