[Metrics UI] Responsive fixes for Legend Options / Bottom Drawer (#86009

) (#87505) Responsive fixes for Legend Options / Bottom Drawer
elastic · Jan 6, 2021 · 0987604 · 0987604
1 parent 16aae3b
commit 0987604
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
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
@@ -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 }}
@@ -317,6 +317,9 @@ const TimelineHeader = euiStyled.div`
   width: 100%;
   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`

diff --git a/...k/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx b/...k/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: 400 }}>
           <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',
@@ -220,12 +218,11 @@ export const LegendControls = ({
             <EuiRange
               id="steps"
               min={2}
-              max={20}
+              max={18}
               step={1}
               value={draftLegend.steps}
               onChange={handleStepsChange}
               showValue
-              compressed
               fullWidth
             />
           </EuiFormRow>
@@ -243,6 +240,10 @@ export const LegendControls = ({
               checked={draftLegend.reverseColors}
               onChange={handleReverseColors}
               compressed
+              style={{
+                position: 'relative',
+                top: '8px',
+              }}
             />
           </EuiFormRow>
           <EuiFormRow
@@ -259,6 +260,10 @@ export const LegendControls = ({
               checked={draftAuto}
               onChange={handleAutoChange}
               compressed
+              style={{
+                position: 'relative',
+                top: '8px',
+              }}
             />
           </EuiFormRow>
           <EuiFormRow
@@ -316,7 +321,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

diff --git a/...k/plugins/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx b/...k/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
@@ -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>