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
index 63bcb6663619d..7d093efd31be0 100644
--- a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
@@ -11,7 +11,12 @@ import { useRouteMatch } from 'react-router-dom';
import { UptimeDatePicker } from '../uptime_date_picker';
import { SyntheticsCallout } from '../../overview/synthetics_callout';
import { PageTabs } from './page_tabs';
-import { CERTIFICATES_ROUTE, MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+import {
+ CERTIFICATES_ROUTE,
+ MONITOR_ROUTE,
+ SETTINGS_ROUTE,
+ STEP_DETAIL_ROUTE,
+} from '../../../../common/constants';
import { CertRefreshBtn } from '../../certificates/cert_refresh_btn';
import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers';
@@ -34,11 +39,12 @@ const StyledPicker = styled(EuiFlexItem)`
export const PageHeader = () => {
const isCertRoute = useRouteMatch(CERTIFICATES_ROUTE);
const isSettingsRoute = useRouteMatch(SETTINGS_ROUTE);
+ const isStepDetailRoute = useRouteMatch(STEP_DETAIL_ROUTE);
const DatePickerComponent = () =>
isCertRoute ? (
- ) : (
+ ) : isStepDetailRoute ? null : (
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts
index d7baaf4245971..95ec298e2e349 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts
@@ -12,4 +12,4 @@ export const MAIN_GROW_SIZE = 8;
export const SIDEBAR_GROW_SIZE = 2;
// Axis height
// NOTE: This isn't a perfect solution - changes in font size etc within charts could change the ideal height here.
-export const FIXED_AXIS_HEIGHT = 33;
+export const FIXED_AXIS_HEIGHT = 32;
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
index f0e5dbcc33aa3..320e415585ca3 100644
--- 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
@@ -22,6 +22,7 @@ export const WaterfallChartFixedTopContainer = euiStyled.div`
position: sticky;
top: 0;
z-index: ${(props) => props.theme.eui.euiZLevel4};
+ border-bottom: ${(props) => `1px solid ${props.theme.eui.euiColorLightShade}`};
`;
export const WaterfallChartFixedTopContainerSidebarCover = euiStyled(EuiPanel)`
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
index e7bf9b2efe6dc..d92e26335a6bd 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
@@ -112,7 +112,7 @@ export const WaterfallChart = ({
{shouldRenderSidebar && (
-
+
)}
@@ -131,10 +131,13 @@ export const WaterfallChart = ({
tickFormat={tickFormat}
domain={domain}
showGridLines={true}
+ style={{
+ axisLine: {
+ visible: false,
+ },
+ }}
/>
- ''} />
-
-
+
{shouldRenderSidebar && (
)}
@@ -170,10 +173,13 @@ export const WaterfallChart = ({
tickFormat={tickFormat}
domain={domain}
showGridLines={true}
+ style={{
+ axisLine: {
+ visible: false,
+ },
+ }}
/>
- ''} />
-