diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_sidebar_item.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_sidebar_item.tsx
index f9d56422ba75c..be624352cd1e4 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_sidebar_item.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_sidebar_item.tsx
@@ -55,13 +55,17 @@ export const WaterfallSidebarItem = ({
       data-test-subj={isHighlighted ? 'sideBarHighlightedItem' : 'sideBarDimmedItem'}
     >
       {!status || !isErrorStatusCode(status) ? (
-        <MiddleTruncatedText
-          text={text}
-          url={url}
-          ariaLabel={ariaLabel}
-          onClick={handleSidebarClick}
-          setButtonRef={setRef}
-        />
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false} style={{ minWidth: 0 }}>
+            <MiddleTruncatedText
+              text={text}
+              url={url}
+              ariaLabel={ariaLabel}
+              onClick={handleSidebarClick}
+              setButtonRef={setRef}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ) : (
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false} style={{ minWidth: 0 }}>
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 5b49e0fd529b7..d36cb025f3c2b 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
@@ -6,14 +6,14 @@
  */
 
 // Pixel value
-export const BAR_HEIGHT = 32;
+export const BAR_HEIGHT = 24;
 // Flex grow value
 export const MAIN_GROW_SIZE = 8;
 // Flex grow value
 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 = 32;
+export const FIXED_AXIS_HEIGHT = 24;
 
 // number of items to display in canvas, since canvas can only have limited size
 export const CANVAS_MAX_ITEMS = 150;
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
index 4881fdb6e6b85..6a9d6660c901c 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
@@ -50,7 +50,6 @@ const LastChunk = styled.span`
 
 const StyledButton = styled(EuiButtonEmpty)`
   &&& {
-    height: auto;
     border: none;
 
     .euiButtonContent {
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 433f59d0e83af..e8125ebcf30cb 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
@@ -115,6 +115,10 @@ export const WaterfallChartSidebarFlexItem = euiStyled(EuiFlexItem)`
 export const SideBarItemHighlighter = euiStyled(EuiFlexItem)<{ isHighlighted: boolean }>`
   opacity: ${(props) => (props.isHighlighted ? 1 : 0.4)};
   height: 100%;
+  .euiButtonEmpty {
+    height: ${FIXED_AXIS_HEIGHT}px;
+    font-size:${({ theme }) => theme.eui.euiFontSizeM};
+  }
 `;
 
 interface WaterfallChartChartContainer {
@@ -124,8 +128,8 @@ interface WaterfallChartChartContainer {
 
 export const WaterfallChartChartContainer = euiStyled.div<WaterfallChartChartContainer>`
   width: 100%;
-  height: ${(props) => `${props.height + FIXED_AXIS_HEIGHT - 4}px`};
-  margin-top: -${FIXED_AXIS_HEIGHT - 4}px;
+  height: ${(props) => `${props.height + FIXED_AXIS_HEIGHT + 4}px`};
+  margin-top: -${FIXED_AXIS_HEIGHT + 4}px;
   z-index: ${(props) => Math.round(props.theme.eui.euiZLevel3 / (props.chartIndex + 1))};
 `;