From 82082cda08a4b4c4fa640b780f91e6b539d6f4e6 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Wed, 24 Feb 2021 19:28:24 +0100
Subject: [PATCH] [Uptime] waterfall improve legend spacing (#92158)

---
 .../synthetics/step_detail/step_detail.tsx        |  8 ++++----
 .../waterfall/waterfall_chart_wrapper.tsx         |  6 +++++-
 .../synthetics/waterfall/components/legend.tsx    | 15 +++++++++++----
 .../waterfall/components/waterfall_chart.tsx      |  8 ++++++--
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail.tsx
index 9fcd946df2f847..befe53219a4494 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail.tsx
@@ -68,16 +68,16 @@ export const StepDetail: React.FC<Props> = ({
 }) => {
   return (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween">
+      <EuiFlexGroup justifyContent="spaceBetween" responsive={false} wrap>
         <EuiFlexItem>
-          <EuiFlexGroup alignItems="center">
+          <EuiFlexGroup alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiTitle size="s">
                 <h1>{stepName}</h1>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiFlexGroup alignItems="center">
+              <EuiFlexGroup alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButtonEmpty
                     onClick={handlePreviousStep}
@@ -109,7 +109,7 @@ export const StepDetail: React.FC<Props> = ({
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+          <EuiFlexGroup alignItems="center" justifyContent="flexEnd" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
                 onClick={handlePreviousRun}
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx
index 8557837abbe466..e4c08236e49de4 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx
@@ -16,7 +16,11 @@ import { WaterfallFlyout } from './waterfall_flyout';
 import { WaterfallSidebarItem } from './waterfall_sidebar_item';
 
 export const renderLegendItem: RenderItem<LegendItem> = (item) => {
-  return <EuiHealth color={item.colour}>{item.name}</EuiHealth>;
+  return (
+    <EuiHealth color={item.colour} className="eui-textNoWrap">
+      {item.name}
+    </EuiHealth>
+  );
 };
 
 interface Props {
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx
index c746a5cc63a9b2..9a66b586d1d561 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx
@@ -9,18 +9,25 @@ import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { IWaterfallContext } from '../context/waterfall_chart';
 import { WaterfallChartProps } from './waterfall_chart';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 
 interface LegendProps {
   items: Required<IWaterfallContext>['legendItems'];
   render: Required<WaterfallChartProps>['renderLegendItem'];
 }
 
+const StyledFlexItem = euiStyled(EuiFlexItem)`
+  margin-right: ${(props) => props.theme.eui.paddingSizes.m};
+  max-width: 7%;
+  min-width: 160px;
+`;
+
 export const Legend: React.FC<LegendProps> = ({ items, render }) => {
   return (
-    <EuiFlexGroup gutterSize="none">
-      {items.map((item, index) => {
-        return <EuiFlexItem key={index}>{render(item, index)}</EuiFlexItem>;
-      })}
+    <EuiFlexGroup gutterSize="s" wrap>
+      {items.map((item, index) => (
+        <StyledFlexItem key={index}>{render(item, index)}</StyledFlexItem>
+      ))}
     </EuiFlexGroup>
   );
 };
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 59990b29db5dbe..119c907f76ca10 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
@@ -120,8 +120,12 @@ export const WaterfallChart = ({
           </WaterfallChartAxisOnlyContainer>
         </WaterfallChartTopContainer>
       </WaterfallChartFixedTopContainer>
-      <WaterfallChartOuterContainer height={height} data-test-subj="waterfallOuterContainer">
-        <EuiFlexGroup gutterSize="none" responsive={false} ref={chartWrapperDivRef}>
+      <WaterfallChartOuterContainer
+        height={height}
+        data-test-subj="waterfallOuterContainer"
+        ref={chartWrapperDivRef}
+      >
+        <EuiFlexGroup gutterSize="none" responsive={false}>
           {shouldRenderSidebar && <Sidebar items={sidebarItems!} render={renderSidebarItem!} />}
 
           <WaterfallChartAxisOnlyContainer