fix(ui): Fixes health icon positioning (argoproj#14708) (argoproj#14852)

* fix: Fixes health icon positioning argoproj#14708 Signed-off-by: ashinsabu3 <ashin.sabu@harness.io> * fix: Fixes alignment of app health application status panel argoproj#14708 Signed-off-by: ashinsabu3 <ashin.sabu@harness.io> * fix: Added line height to App Status to fix its positioning argoproj#14708 Signed-off-by: ashinsabu3 <ashin.sabu@harness.io> --------- Signed-off-by: ashinsabu3 <ashin.sabu@harness.io> Signed-off-by: Jimmy Neville <jimmyeneville@gmail.com>
radiusmethod · Sep 30, 2023 · e7396b2 · e7396b2
1 parent 494a759
commit e7396b2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.scss b/ui/src/app/applications/components/application-status-panel/application-status-panel.scss
@@ -70,6 +70,7 @@
         }
         display: flex;
         flex-direction: column;
+        justify-content: flex-start;
         flex-shrink: 0;
         flex-grow: 0;
 
@@ -134,7 +135,7 @@
 
     &__item-value {
         display: flex;
-        align-items: flex-end;
+        align-items: center;
         margin-bottom: 0.5em;
         font-weight: 500;
         .fa {

diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
@@ -71,7 +71,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
     return (
         <div className='application-status-panel row'>
             <div className='application-status-panel__item'>
-                <div style={{marginBottom: '1em'}}>{sectionLabel({title: 'APP HEALTH', helpContent: 'The health status of your app'})}</div>
+                <div style={{lineHeight: '19.5px', marginBottom: '0.3em'}}>{sectionLabel({title: 'APP HEALTH', helpContent: 'The health status of your app'})}</div>
                 <div className='application-status-panel__item-value'>
                     <HealthStatusIcon state={application.status.health} />
                     &nbsp;