Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: insights health info link placement (#7750)

Browse Source 
Fixing link placement on smaller screens.
This commit is contained in:
Tymoteusz Czech 2024-08-05 10:39:48 +02:00 committed by GitHub
parent afa34867c1
commit 11612931b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx
View File

@ -10,6 +10,13 @@ interface IHealthStatsProps {
title?: ReactNode; title?: ReactNode;
} }
const StyledContainer = styled(Box)(({ theme }) => ({
position: 'relative',
display: 'flex',
flexDirection: 'column',
height: '100%',
}));
const StyledStatsRow = styled(Box)(({ theme }) => ({ const StyledStatsRow = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -19,6 +26,7 @@ const StyledStatsRow = styled(Box)(({ theme }) => ({
const ExplanationRow = styled(StyledStatsRow)(({ theme }) => ({ const ExplanationRow = styled(StyledStatsRow)(({ theme }) => ({
flex: 1, flex: 1,
justifyContent: 'flex-end', justifyContent: 'flex-end',
alignItems: 'flex-end',
})); }));
const StyledIcon = styled(InstanceHealthIcon)(({ theme }) => ({ const StyledIcon = styled(InstanceHealthIcon)(({ theme }) => ({
@ -40,7 +48,7 @@ const StyledSection = styled('div')(({ theme }) => ({
})); }));
const FlagsSection = styled(StyledSection)(({ theme }) => ({ const FlagsSection = styled(StyledSection)(({ theme }) => ({
height: '100%', flexGrow: 1,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
})); }));
@ -62,7 +70,7 @@ export const HealthStats: FC<IHealthStatsProps> = ({
potentiallyStale, potentiallyStale,
title, title,
}) => ( }) => (
<div> <StyledContainer>
<StyledHeader> <StyledHeader>
<StyledSection>{title}</StyledSection> <StyledSection>{title}</StyledSection>
<StyledSection>{/* TODO: trend */}</StyledSection> <StyledSection>{/* TODO: trend */}</StyledSection>
@ -99,5 +107,5 @@ export const HealthStats: FC<IHealthStatsProps> = ({
</Link> </Link>
</ExplanationRow> </ExplanationRow>
</FlagsSection> </FlagsSection>
</div> </StyledContainer>
); );