[Metrics UI] Fixing title truncation in Metrics Explorer

elastic · Jan 24, 2020 · 7f24a7c · 7f24a7c
1 parent 25765a9
commit 7f24a7c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart.tsx b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart.tsx
@@ -86,7 +86,7 @@ export const MetricsExplorerChart = ({
         <EuiTitle size="xs">
           <EuiFlexGroup alignItems="center">
             <ChartTitle>
-              <EuiToolTip content={title}>
+              <EuiToolTip content={title} anchorClassName="metricsExplorerTitleAnchor">
                 <span>{title}</span>
               </EuiToolTip>
             </ChartTitle>
@@ -159,7 +159,7 @@ export const MetricsExplorerChart = ({
 };
 
 const ChartTitle = euiStyled.div`
-  width: 100%
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

diff --git a/x-pack/legacy/plugins/infra/public/index.scss b/x-pack/legacy/plugins/infra/public/index.scss
@@ -36,6 +36,12 @@
 
 .infrastructureChart .echTooltip__label {
   overflow-x: hidden;
-  white-space: no-wrap;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.metricsExplorerTitleAnchor {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline;
+}