[ML] Fix vertical overflow on Single Metric Viewer page (#66413)

* [ML] fix page overflow * [ML] fix tooltip overflow
elastic · May 13, 2020 · 69d4199 · 69d4199
1 parent 9ab73ef
commit 69d4199
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>