[ML] Fixes chart header flex layout overflows.

elastic · Oct 4, 2018 · 9537d87 · 9537d87
1 parent 3e4e37e
commit 9537d87
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/...l/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/...l/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/...explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/...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
@@ -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;
 }