Fix Legend Options and Node Map layout on mobile view (#142052)

* Fix Legend Options and Node Map layout on mobile view * Fix Number of Color bar on mobile Co-authored-by: Kibana Machine <[email protected]>
elastic · Sep 29, 2022 · 60e5e41 · 60e5e41
1 parent 13824dd
commit 60e5e41
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
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
@@ -24,6 +24,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import React, { SyntheticEvent, useState, useCallback, useEffect } from 'react';
 import { first, last } from 'lodash';
 import { InfraWaffleMapBounds, InventoryColorPalette, PALETTES } from '../../../../../lib/lib';
@@ -189,9 +190,10 @@ export const LegendControls = ({
       button={buttonComponent}
       anchorPosition="leftCenter"
       data-test-subj="legendControls"
+      // panelStyle={{ width: '100%', maxWidth: 375 }}
     >
       <EuiPopoverTitle>Legend Options</EuiPopoverTitle>
-      <EuiForm style={{ minWidth: 400 }}>
+      <StyledEuiForm>
         <EuiFormRow
           display="columnCompressed"
           label={i18n.translate('xpack.infra.legendControls.colorPaletteLabel', {
@@ -352,7 +354,16 @@ export const LegendControls = ({
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiForm>
+      </StyledEuiForm>
     </EuiPopover>
   );
 };
+
+const StyledEuiForm = euiStyled(EuiForm)`
+  min-width: 400px;
+  @media (max-width: 480px) {
+    min-width: 100%;
+    max-width: 100%;
+    width: 100vw;
+  }
+`;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
@@ -105,6 +105,7 @@ const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeig
   overflow-x: hidden;
   overflow-y: auto;
   margin-bottom: ${(props) => props.bottomMargin}px;
+  max-width: calc(100vw - 90px);
   ${(props) => props.staticHeight && 'min-height: 300px;'}
 `;
 

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
@@ -28,9 +28,9 @@ export const PalettePreview = ({ steps, palette, reverse }: Props) => {
 };
 
 const Swatch = euiStyled.div`
-  width: 15px;
+  max-width: 15px;
   height: 12px;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   &:first-child {
     border-radius: ${(props) => props.theme.eui.euiBorderRadius} 0 0 ${(props) =>
   props.theme.eui.euiBorderRadius};