From 9537d87976f47714601aed0fcf1e16b9c9dbd131 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 4 Oct 2018 10:54:28 +0200
Subject: [PATCH] [ML] Fixes chart header flex layout overflows.

---
 .../components/explorer_chart_label/explorer_chart_label.js | 4 ++--
 .../explorer_chart_label/styles/explorer_chart_label.less   | 6 ++++++
 .../explorer/explorer_charts/styles/explorer_chart.less     | 5 +++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
index a8f5e84ba4523..a64457f0a44c8 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -35,7 +35,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   const entityFieldBadges = entityFields.map((entity) => {
     return (
       <React.Fragment key={`${entity.fieldName} ${entity.fieldValue}`}>
-        <ExplorerChartLabelBadge entity={entity} />&nbsp;
+        <ExplorerChartLabelBadge entity={entity} />
       </React.Fragment>
     );
   });
@@ -63,7 +63,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
         )}
       </span>
       {wrapLabel && (
-        <div>{entityFieldBadges}</div>
+        <span className="ml-explorer-chart-label-badges">{entityFieldBadges}</span>
       )}
     </React.Fragment>
   );
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
index 58692cf0a6f24..ecafa9bd4356a 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
@@ -1,3 +1,9 @@
 .ml-explorer-chart-eui-icon-tip {
   max-width: none;
 }
+
+.ml-explorer-chart-label-badges {
+  margin-top: 3px;
+  /* let this overflow but not interfere with the flex layout */
+  width: 0;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
index ace3165e09e36..6ab1382384078 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
@@ -1,4 +1,5 @@
 .ml-explorer-chart-container {
+  overflow: hidden;
 
   .ml-explorer-chart-svg {
     font-size: 12px;
@@ -109,6 +110,10 @@
   }
 }
 
+.ml-explorer-chart {
+  overflow: hidden;
+}
+
 .ml-explorer-chart-content-wrapper {
   height: 215px;
 }