Adjust menu/content/column pad on small screens (#8709)

* Adjust menu/content/column pad on small screens

* Adjust overlay

packages/apps/src/Content/index.tsx

@@ -116,5 +116,13 @@ export default React.memo(styled(Content)`
     margin-left: auto;
     width: 100%;
     padding: 0 1.5rem;
+
+    @media only screen and (max-width: 1100px) {
+      padding: 0 1rem;
+    }
+
+    @media only screen and (max-width: 800px) {
+      padding: 0 0.75rem;
+    }
   }
 `);

packages/apps/src/Menu/index.tsx

@@ -168,20 +168,6 @@ export default React.memo(styled(Menu)`
     display: none;
   }
 
-  @media only screen and (max-width: 800px) {
-    .groupHdr {
-      padding: 0.857rem;
-    }
-
-    .smallShow {
-      display: initial;
-    }
-
-    .smallHide {
-      display: none;
-    }
-  }
-
   & .menuContainer {
     flex-direction: row;
     align-items: center;
@@ -247,4 +233,25 @@ export default React.memo(styled(Menu)`
     align-self: center;
   }
 
+  @media only screen and (max-width: 800px) {
+    .groupHdr {
+      padding: 0.857rem 0.75rem;
+    }
+
+    .smallShow {
+      display: initial;
+    }
+
+    .smallHide {
+      display: none;
+    }
+
+    .menuItems {
+      margin-right: 0;
+
+      > li + li {
+        margin-left: 0.25rem;
+      }
+    }
+  }
 `);

packages/react-components/src/Columar.tsx

@@ -80,7 +80,7 @@ const ColumarStyled = React.memo(styled(Columar)`
   }
 
   &.defaultSize {
-    @media (min-width: ${MIN_WIDTH_DEFAULT}) {
+    @media only screen and (min-width: ${MIN_WIDTH_DEFAULT}) {
       ${FLEX_OPTIONS}
     }
 
@@ -90,7 +90,7 @@ const ColumarStyled = React.memo(styled(Columar)`
   }
 
   &.smallSize {
-    @media (min-width: ${MIN_WIDTH_SMALL}) {
+    @media only screen and (min-width: ${MIN_WIDTH_SMALL}) {
       ${FLEX_OPTIONS}
     }
 
@@ -100,7 +100,7 @@ const ColumarStyled = React.memo(styled(Columar)`
   }
 
   &.tinySize {
-    @media (min-width: ${MIN_WIDTH_TINY}) {
+    @media only screen and (min-width: ${MIN_WIDTH_TINY}) {
       ${FLEX_OPTIONS}
     }
 
@@ -109,6 +109,22 @@ const ColumarStyled = React.memo(styled(Columar)`
     }
   }
 
+  &.defaultSize, &.smallSize {
+    @media only screen and (max-width: ${MIN_WIDTH_SMALL}) {
+      &.isPadded > .ui--Column {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+
+  &.defaultSize, &.smallSize, &.tinySize {
+    @media only screen and (max-width: ${MIN_WIDTH_TINY}) {
+      &.isPadded > .ui--Column {
+        padding: 0 0.25rem;
+      }
+    }
+  }
+
   > .ui--Column {
     box-sizing: border-box;
     max-width: 100%;

packages/react-components/src/FilterOverlay.tsx

@@ -4,8 +4,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import media from './media';
-
 interface Props {
   children: React.ReactNode;
   className?: string;
@@ -23,11 +21,19 @@ export default React.memo(styled(FilterOverlay)`
   display: none;
   right: calc(50% - var(--width-half) + 1.5rem);
 
-  ${media.DESKTOP`
+  .ui--Labelled label {
+    display: none;
+  }
+
+  && .ui--Input {
+    margin: 0.29rem 0;
+  }
+
+  @media only screen and (min-width: 1150px) {
     display: flex;
     justify-content: flex-end;
     position: absolute;
-    top: 0rem;
+    top: 0;
 
     > div {
       max-width: 35rem !important;
@@ -40,18 +46,10 @@ export default React.memo(styled(FilterOverlay)`
     .ui.selection.dropdown {
       white-space: nowrap;
     }
-  `};
-
-  .ui--Labelled label {
-    display: none;
-  }
-
-  && .ui--Input {
-    margin: 0.29rem 0;
   }
 
   /* hardcoded: var(--width-full) doesn't work in media */
-  @media (max-width: 1750px) {
+  @media only screen and (max-width: 1750px) {
     right: 1.5rem;
   }
 `);

packages/react-components/src/constants.ts

@@ -5,12 +5,6 @@ import type { ComponentMap } from '@polkadot/react-params/types';
 
 import BalanceParam from '@polkadot/react-params/Param/Balance';
 
-export const ScreenSizes = {
-  DESKTOP: 992,
-  PHONE: 576,
-  TABLET: 768
-};
-
 export const rewardDestinationOptions = [
   { text: 'Stash account (increase the amount at stake)', value: 0 },
   { text: 'Stash account (do not increase the amount at stake)', value: 1 },

packages/react-components/src/index.tsx

@@ -104,5 +104,3 @@ export { default as TextArea } from './TextArea';
 export { default as ExpandButton } from './ExpandButton';
 export { default as SortDropdown } from './SortDropdown';
 export { default as FilterInput } from './FilterInput';
-
-export { default as media } from './media';

packages/react-components/src/media.ts

@@ -1,27 +0,0 @@
-// Copyright 2017-2023 @polkadot/react-components authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { css } from 'styled-components';
-
-import { ScreenSizes } from './constants';
-
-type MediaCss = {
-  [index in keyof typeof ScreenSizes]: (values: TemplateStringsArray) => any
-};
-
-const media = Object
-  .keys(ScreenSizes)
-  .reduce((acc: MediaCss, label: any): MediaCss => {
-    const size: number = ScreenSizes[label as 'TABLET'];
-
-    acc[label as 'TABLET'] = (values: TemplateStringsArray): unknown =>
-      css`
-        @media (min-width: ${size / 16}em) {
-          ${values}
-        }
-      `;
-
-    return acc;
-  }, {} as unknown as MediaCss);
-
-export default media;