[Metrics UI] Fixing title truncation in Metrics Explorer (#55917) (#5…

…6249) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jan 29, 2020 · 01f3bfe · 01f3bfe
1 parent ef5b680
commit 01f3bfe
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
@@ -85,7 +85,7 @@ export const MetricsExplorerChart = ({
         <EuiTitle size="xs">
           <EuiFlexGroup alignItems="center">
             <ChartTitle>
-              <EuiToolTip content={title}>
+              <EuiToolTip content={title} anchorClassName="metricsExplorerTitleAnchor">
                 <span>{title}</span>
               </EuiToolTip>
             </ChartTitle>
@@ -158,7 +158,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;
+}