fix multiple scrolls on waterfall view

elastic · Jan 5, 2021 · f962218 · f962218
1 parent 0188b9f
commit f962218
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
@@ -44,14 +44,18 @@ export const PageHeader = () => {
   const DatePickerComponent = () =>
     isCertRoute ? (
       <CertRefreshBtn />
-    ) : isStepDetailRoute ? null : (
+    ) : (
       <StyledPicker grow={false} style={{ flexBasis: 485 }}>
         <UptimeDatePicker />
       </StyledPicker>
     );
 
   const isMonRoute = useRouteMatch(MONITOR_ROUTE);
 
+  if (isStepDetailRoute) {
+    return null;
+  }
+
   return (
     <>
       <SyntheticsCallout />

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts
@@ -13,7 +13,7 @@ interface WaterfallChartOuterContainerProps {
 }
 
 export const WaterfallChartOuterContainer = euiStyled.div<WaterfallChartOuterContainerProps>`
-  height: ${(props) => (props.height ? `${props.height}px` : 'auto')};
+  height: calc(100vh - 228px);
   overflow-y: ${(props) => (props.height ? 'scroll' : 'visible')};
   overflow-x: hidden;
 `;

diff --git a/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
@@ -86,7 +86,6 @@ export const WaterfallChart = ({
   barStyleAccessor,
   renderSidebarItem,
   renderLegendItem,
-  maxHeight = 800,
 }: WaterfallChartProps) => {
   const { data, sidebarItems, legendItems } = useWaterfallContext();
 
@@ -106,7 +105,7 @@ export const WaterfallChart = ({
     legendItems && legendItems.length > 0 && renderLegendItem ? true : false;
 
   return (
-    <WaterfallChartOuterContainer height={maxHeight}>
+    <WaterfallChartOuterContainer>
       <>
         <WaterfallChartFixedTopContainer>
           <EuiFlexGroup gutterSize="none" responsive={false}>