styling adjustments

elastic · Nov 18, 2024 · 658117b · 658117b
1 parent d895bfa
commit 658117b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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