From 11612931b917d63c4d9c9d7af0d42f24703885b0 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:39:48 +0200
Subject: [PATCH] fix: insights health info link placement (#7750)

Fixing link placement on smaller screens.
---
 .../componentsStat/HealthStats/HealthStats.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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