[ML] Fix layout of anomaly chart tooltip for long field values (#72689)…

… (#72804)
elastic · Jul 22, 2020 · 4e8484a · 4e8484a
1 parent f7bf42f
commit 4e8484a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 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
@@ -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
@@ -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>
                   );
                 })}