From 1ea364b8002f63f0c574e6167e442cd1a0582616 Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Tue, 8 Dec 2020 15:48:05 -0700
Subject: [PATCH 1/7] fixing history positioning so that it shows when the nav
 is docked

---
 .../pages/metrics/inventory_view/components/bottom_drawer.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
index 5c6e124914f39..05c316a363ef2 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
@@ -67,7 +67,7 @@ export const BottomDrawer: React.FC<{
 
 const BottomActionContainer = euiStyled.div<{ isOpen: boolean }>`
   padding: ${(props) => props.theme.eui.paddingSizes.m} 0;
-  position: fixed;
+  position: absolute;
   left: 0;
   bottom: 0;
   right: 0;

From 721043bbeabbb6b8a5d37001617bdc756a07d599 Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Wed, 9 Dec 2020 13:24:19 -0700
Subject: [PATCH 2/7] responsive fixes for timeline and color palette

---
 .../components/bottom_drawer.tsx              | 22 ++++++++++---------
 .../components/timeline/timeline.tsx          |  6 ++---
 .../components/waffle/legend_controls.tsx     |  4 +---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
index 05c316a363ef2..dcb0ed1e4d023 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
@@ -36,6 +36,17 @@ export const BottomDrawer: React.FC<{
 
   return (
     <BottomActionContainer ref={isOpen ? measureRef : null} isOpen={isOpen}>
+      <EuiFlexItem
+        grow={false}
+        style={{
+          position: 'relative',
+          maxWidth: 400,
+          height: '16px',
+          margin: '0 auto',
+        }}
+      >
+        {children}
+      </EuiFlexItem>
       <BottomActionTopBar ref={isOpen ? null : measureRef}>
         <EuiFlexItem grow={false}>
           <ShowHideButton
@@ -46,16 +57,7 @@ export const BottomDrawer: React.FC<{
             {isOpen ? hideHistory : showHistory}
           </ShowHideButton>
         </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-          style={{
-            position: 'relative',
-            minWidth: 400,
-            height: '16px',
-          }}
-        >
-          {children}
-        </EuiFlexItem>
+
         <RightSideSpacer />
       </BottomActionTopBar>
       <EuiFlexGroup style={{ marginTop: 0 }}>
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
index d66fd44feba56..699f1f0099e22 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@@ -222,9 +222,9 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup alignItems={'center'}>
+          <EuiFlexGroup alignItems={'center'} responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+              <EuiFlexGroup gutterSize={'s'} alignItems={'center'} responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiIcon color={colorTransformer(chartMetric.color)} type={'dot'} />
                 </EuiFlexItem>
@@ -240,7 +240,7 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
               </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+              <EuiFlexGroup gutterSize={'s'} alignItems={'center'} responsive={false}>
                 <EuiFlexItem
                   grow={false}
                   style={{ backgroundColor: '#D36086', height: 5, width: 10 }}
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
index 1c1baad30f473..7b20214a5c5e5 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
@@ -186,9 +186,8 @@ export const LegendControls = ({
         button={buttonComponent}
       >
         <EuiPopoverTitle>Legend Options</EuiPopoverTitle>
-        <EuiForm style={{ width: 500 }}>
+        <EuiForm style={{ minWidth: 500 }}>
           <EuiFormRow
-            fullWidth
             display="columnCompressed"
             label={i18n.translate('xpack.infra.legendControls.colorPaletteLabel', {
               defaultMessage: 'Color palette',
@@ -211,7 +210,6 @@ export const LegendControls = ({
             </>
           </EuiFormRow>
           <EuiFormRow
-            fullWidth
             display="columnCompressed"
             label={i18n.translate('xpack.infra.legendControls.stepsLabel', {
               defaultMessage: 'Number of colors',

From 89ee6eaf5901cf219aeb1163dca5e16e55ac39ac Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Thu, 10 Dec 2020 13:59:24 -0700
Subject: [PATCH 3/7]  more responsvie fixes

---
 .../inventory_view/components/waffle/legend_controls.tsx     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
index 7b20214a5c5e5..55b7dc85a6fc5 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
@@ -186,7 +186,7 @@ export const LegendControls = ({
         button={buttonComponent}
       >
         <EuiPopoverTitle>Legend Options</EuiPopoverTitle>
-        <EuiForm style={{ minWidth: 500 }}>
+        <EuiForm style={{ minWidth: 400 }}>
           <EuiFormRow
             display="columnCompressed"
             label={i18n.translate('xpack.infra.legendControls.colorPaletteLabel', {
@@ -223,7 +223,6 @@ export const LegendControls = ({
               value={draftLegend.steps}
               onChange={handleStepsChange}
               showValue
-              compressed
               fullWidth
             />
           </EuiFormRow>
@@ -314,7 +313,7 @@ export const LegendControls = ({
             </div>
           </EuiFormRow>
           <EuiSpacer size="m" />
-          <EuiFlexGroup justifyContent="flexEnd">
+          <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty type="submit" size="s" onClick={handleCancelClick}>
                 <FormattedMessage

From 91e1232038b32ca09b9edc5cbe65034c273641e6 Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Mon, 14 Dec 2020 14:45:43 -0700
Subject: [PATCH 4/7] fixing layout and responsive issues

---
 .../components/waffle/legend_controls.tsx              | 10 +++++++++-
 .../components/waffle/palette_preview.tsx              |  2 +-
 .../inventory_view/components/waffle/swatch_label.tsx  |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
index 55b7dc85a6fc5..f4da68d9dead7 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
@@ -218,7 +218,7 @@ export const LegendControls = ({
             <EuiRange
               id="steps"
               min={2}
-              max={20}
+              max={18}
               step={1}
               value={draftLegend.steps}
               onChange={handleStepsChange}
@@ -240,6 +240,10 @@ export const LegendControls = ({
               checked={draftLegend.reverseColors}
               onChange={handleReverseColors}
               compressed
+              style={{
+                position: 'relative',
+                top: '8px',
+              }}
             />
           </EuiFormRow>
           <EuiFormRow
@@ -256,6 +260,10 @@ export const LegendControls = ({
               checked={draftAuto}
               onChange={handleAutoChange}
               compressed
+              style={{
+                position: 'relative',
+                top: '8px',
+              }}
             />
           </EuiFormRow>
           <EuiFormRow
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx
index 18f15ba7ab81f..09e323b55a71a 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx
@@ -27,7 +27,7 @@ export const PalettePreview = ({ steps, palette, reverse }: Props) => {
 };
 
 const Swatch = euiStyled.div`
-  width: 16px;
+  width: 15px;
   height: 12px;
   flex: 0 0 auto;
   &:first-child {
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/swatch_label.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/swatch_label.tsx
index ae64188f8a469..f4cec07b53b3b 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/swatch_label.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/swatch_label.tsx
@@ -14,7 +14,7 @@ export interface Props {
 
 export const SwatchLabel = ({ label, color }: Props) => {
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="s">
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem grow={false}>
         <EuiColorPickerSwatch color={color} />
       </EuiFlexItem>

From 2f3dcfdc1e902c01ff61845a6586b2b50456c518 Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Tue, 15 Dec 2020 09:19:10 -0700
Subject: [PATCH 5/7] removing docked nav fix

---
 .../components/bottom_drawer.tsx              | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
index dcb0ed1e4d023..05c316a363ef2 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
@@ -36,17 +36,6 @@ export const BottomDrawer: React.FC<{
 
   return (
     <BottomActionContainer ref={isOpen ? measureRef : null} isOpen={isOpen}>
-      <EuiFlexItem
-        grow={false}
-        style={{
-          position: 'relative',
-          maxWidth: 400,
-          height: '16px',
-          margin: '0 auto',
-        }}
-      >
-        {children}
-      </EuiFlexItem>
       <BottomActionTopBar ref={isOpen ? null : measureRef}>
         <EuiFlexItem grow={false}>
           <ShowHideButton
@@ -57,7 +46,16 @@ export const BottomDrawer: React.FC<{
             {isOpen ? hideHistory : showHistory}
           </ShowHideButton>
         </EuiFlexItem>
-
+        <EuiFlexItem
+          grow={false}
+          style={{
+            position: 'relative',
+            minWidth: 400,
+            height: '16px',
+          }}
+        >
+          {children}
+        </EuiFlexItem>
         <RightSideSpacer />
       </BottomActionTopBar>
       <EuiFlexGroup style={{ marginTop: 0 }}>

From df9ef6ae8e7024ec0714af20d25fb613b727f888 Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Tue, 15 Dec 2020 12:11:12 -0700
Subject: [PATCH 6/7] adding margin to fix responsive issues

---
 .../pages/metrics/inventory_view/components/bottom_drawer.tsx   | 2 +-
 .../metrics/inventory_view/components/timeline/timeline.tsx     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
index 05c316a363ef2..5c6e124914f39 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx
@@ -67,7 +67,7 @@ export const BottomDrawer: React.FC<{
 
 const BottomActionContainer = euiStyled.div<{ isOpen: boolean }>`
   padding: ${(props) => props.theme.eui.paddingSizes.m} 0;
-  position: absolute;
+  position: fixed;
   left: 0;
   bottom: 0;
   right: 0;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
index 699f1f0099e22..33b0d3ad4e512 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@@ -315,6 +315,7 @@ const TimelineContainer = euiStyled.div`
 const TimelineHeader = euiStyled.div`
   display: flex;
   width: 100%;
+  margin-top: 30px;
   padding: ${(props) => props.theme.eui.paddingSizes.s} ${(props) =>
   props.theme.eui.paddingSizes.m};
 `;

From 6507ccab0bf1874565833cd2074ad9f238572a5f Mon Sep 17 00:00:00 2001
From: Kate Farrar <kate.farrar@gmail.com>
Date: Wed, 16 Dec 2020 14:12:19 -0700
Subject: [PATCH 7/7] cleaning up markup

---
 .../metrics/inventory_view/components/timeline/timeline.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
index 33b0d3ad4e512..f1e796ef8ba18 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@@ -315,9 +315,11 @@ const TimelineContainer = euiStyled.div`
 const TimelineHeader = euiStyled.div`
   display: flex;
   width: 100%;
-  margin-top: 30px;
   padding: ${(props) => props.theme.eui.paddingSizes.s} ${(props) =>
   props.theme.eui.paddingSizes.m};
+  @media only screen and (max-width: 767px) {
+      margin-top: 30px;
+  }
 `;
 
 const TimelineChartContainer = euiStyled.div`