From d5af58ce0ec867cafb475f2b0447d28ecdcf4f6a Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 9 Apr 2025 14:24:37 +0200 Subject: [PATCH] fix: wrap env data before truncating env name. (#9733) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). image --- .../EnvironmentHeader/EnvironmentHeader.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 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 0f68a91f60..392e231846 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 @@ -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 }) => ({