From 91aadb7ed53e361844d108f0aea4f32b2ca474cf Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Wed, 13 May 2020 20:24:40 +0200
Subject: [PATCH] [ML] Fix vertical overflow on Single Metric Viewer page
 (#66413) (#66436)

* [ML] fix page overflow

* [ML] fix tooltip overflow
---
 .../application/components/chart_tooltip/chart_tooltip.tsx  | 5 +++++
 .../application/timeseriesexplorer/_timeseriesexplorer.scss | 6 ------
 .../application/timeseriesexplorer/timeseriesexplorer.js    | 2 ++
 .../timeseriesexplorer/timeseriesexplorer_page.tsx          | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

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
index decd1275fe884..3ca191d6251cf 100644
--- 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
@@ -96,6 +96,11 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
 
   return (
     <TooltipTrigger
+      modifiers={{
+        preventOverflow: {
+          boundariesElement: 'window',
+        },
+      }}
       placement="right-start"
       trigger="none"
       tooltipShown={isTooltipShown}
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
index 06f93ff7b158e..8d4f6ad0a6844 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
@@ -1,6 +1,4 @@
 .ml-time-series-explorer {
-  width: 100%;
-  display: inline-block;
   color: $euiColorDarkShade;
 
   .no-results-container {
@@ -31,8 +29,6 @@
   }
 
   .results-container {
-    padding: $euiSize;
-
     .panel-title {
       font-size: $euiFontSizeM;
       font-weight: 400;
@@ -46,8 +42,6 @@
   }
 
   .series-controls {
-    padding: $euiSize $euiSize 0px $euiSize;
-
     div.entity-controls {
       display: inline-block;
       padding-left: $euiSize;
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
index 8bf42fe545152..4e04a63640a87 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -1180,6 +1180,8 @@ export class TimeSeriesExplorer extends React.Component {
           </EuiFlexGroup>
         </div>
 
+        <EuiSpacer size="m" />
+
         {fullRefresh && loading === true && (
           <LoadingIndicator
             label={i18n.translate('xpack.ml.timeSeriesExplorer.loadingLabel', {
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx
index a44171167cb67..4f665fdf568c8 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx
@@ -49,7 +49,7 @@ export const TimeSeriesExplorerPage: FC<TimeSeriesExplorerPageProps> = ({
         ref={resizeRef}
         data-test-subj="mlPageSingleMetricViewer"
       >
-        <EuiPage style={{ padding: '0px', background: 'none' }}>
+        <EuiPage style={{ background: 'none' }}>
           <EuiPageBody>
             <EuiScreenReaderOnly>
               <h1>