From 658117bb4ee96f34febfdeb83b9a0748477b853b Mon Sep 17 00:00:00 2001
From: rbrtj <robert.jaszczurek@elastic.co>
Date: Mon, 18 Nov 2024 19:10:10 +0100
Subject: [PATCH] styling adjustments

---
 .../influencers_list/influencers_list.tsx        |  4 ++--
 .../influencers_list/influencers_list_styles.ts  | 16 +++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx
index 1b7e2c9c3ae2f..35f3bb83ebb10 100644
--- a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx
+++ b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx
@@ -88,8 +88,8 @@ const Influencer: FC<InfluencerProps> = ({ influencerFieldName, influencerFilter
         />
       </div>
       <div css={styles.progress}>
-        <div css={styles.progressBarHolder(barScore)}>
-          <div css={styles.progressBar(severity.id)} />
+        <div css={styles.progressBarHolder}>
+          <div css={styles.progressBar(severity.id, barScore)} />
         </div>
         <div css={styles.scoreLabel(severity.id)}>
           <EuiToolTip
diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts
index e5dd95a8461e0..5a0732ceb8d70 100644
--- a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts
+++ b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts
@@ -35,21 +35,19 @@ export const useInfluencersListStyles = () => {
       color: euiTheme.euiColorDarkShade,
       backgroundColor: 'transparent',
     }),
-    progressBarHolder: (barScore: number) =>
-      css({
-        width: `${barScore}%`,
-        display: 'inline-block',
-        maxWidth: `calc(100% - 28px)`,
-      }),
-    progressBar: (severity: string) =>
+    progressBarHolder: css({
+      width: `calc(100% - 28px)`,
+    }),
+    progressBar: (severity: string, barScore: number) =>
       css({
         height: `calc(${euiTheme.euiSizeXS} / 2)`,
+        float: 'left',
         marginTop: euiTheme.euiSizeM,
         textAlign: 'right',
         lineHeight: '18px',
         display: 'inline-block',
         transition: 'none',
-        width: `100%`,
+        width: `${barScore}%`,
         backgroundColor:
           severity === 'critical'
             ? mlColors.critical
@@ -66,7 +64,7 @@ export const useInfluencersListStyles = () => {
         whiteSpace: 'nowrap',
         fontSize: euiTheme.euiFontSizeXS,
         marginLeft: euiTheme.euiSizeXS,
-        display: 'inline-block',
+        display: 'inline',
         borderColor:
           severity === 'critical'
             ? mlColors.critical