Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-17 01:17:29 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Thomas Heartman 2025-03-24 10:52:38 +01:00 committed by GitHub
parent b84699f563
commit 01870c6165
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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