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

… (#72802)
elastic · Jul 22, 2020 · da374f8 · da374f8
1 parent 91ec573
commit da374f8
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>
  );
  })}