From 4e8484a4a6cdcbb89bfd62074c54eb5ffa7482e2 Mon Sep 17 00:00:00 2001
From: Pete Harverson <peteharverson@users.noreply.github.com>
Date: Wed, 22 Jul 2020 11:28:23 +0100
Subject: [PATCH] [ML] Fix layout of anomaly chart tooltip for long field
 values (#72689) (#72804)

---
 .../components/chart_tooltip/_chart_tooltip.scss   |  5 -----
 .../components/chart_tooltip/chart_tooltip.tsx     | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss b/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
index 25bf3597c3466..46e5d91e1cc83 100644
--- a/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
+++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
@@ -25,15 +25,10 @@
   }
 
   &__label {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
     min-width: 1px;
-    flex: 1 1 auto;
   }
 
   &__value {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
     font-weight: $euiFontWeightBold;
     text-align: right;
     font-feature-settings: 'tnum';
diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
index 7897ef5cad0df..3bd4ae1748311 100644
--- a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
+++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
@@ -7,6 +7,7 @@
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import TooltipTrigger from 'react-popper-tooltip';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { TooltipValueFormatter } from '@elastic/charts';
 
 import './_index.scss';
@@ -79,8 +80,17 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
                         borderLeftColor: color,
                       }}
                     >
-                      <span className="mlChartTooltip__label">{label}</span>
-                      <span className="mlChartTooltip__value">{value}</span>
+                      <EuiFlexGroup>
+                        <EuiFlexItem
+                          className="eui-textBreakWord mlChartTooltip__label"
+                          grow={false}
+                        >
+                          {label}
+                        </EuiFlexItem>
+                        <EuiFlexItem className="eui-textBreakAll mlChartTooltip__value">
+                          {value}
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
                     </div>
                   );
                 })}