[Uptime] waterfall improve legend spacing (#92158) (#92692)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
elastic · Feb 24, 2021 · e78ba37 · e78ba37
1 parent b4bad93
commit e78ba37
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 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
@@ -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/...me/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx b/...me/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
@@ -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/...gins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/...gins/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