Improve responsiveness

src/components/AppLayout/MenuList.tsx

@@ -101,7 +101,7 @@ const useStyles = makeStyles(theme => ({
       content: "''",
       height: 0,
       position: "absolute",
-      right: -35,
+      right: -30,
       top: 15,
       width: 0
     },

src/components/AppLayout/MenuNested.tsx

@@ -8,7 +8,11 @@ import SVG from "react-inlinesvg";
 import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
 import useTheme from "@saleor/hooks/useTheme";
 import { createHref } from "@saleor/misc";
-import { drawerWidthExpanded, drawerWidthExpandedMobile } from "./consts";
+import {
+  drawerNestedMenuWidth,
+  drawerWidthExpanded,
+  drawerWidthExpandedMobile
+} from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
@@ -20,7 +24,7 @@ const useStyles = makeStyles(theme => ({
     right: 0,
     top: 0,
     transition: `right  ${theme.transitions.duration.shorter}ms ease`,
-    width: 300,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   menuListNestedClose: {
@@ -74,8 +78,8 @@ const useStyles = makeStyles(theme => ({
       width: drawerWidthExpandedMobile,
       zIndex: 2
     },
-    right: -300,
+    right: -drawerNestedMenuWidth,
-    width: drawerWidthExpanded,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   subHeader: {

src/components/AppLayout/consts.ts

@@ -1,5 +1,6 @@
 export const drawerWidthExpanded = 210;
 export const drawerWidthExpandedMobile = 250;
 export const drawerWidth = 80;
+export const drawerNestedMenuWidth = 300;
 export const navigationBarHeight = 64;
 export const appLoaderHeight = 4;

src/components/ColumnPicker/ColumnPicker.tsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles(
   theme => ({
     popper: {
       boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`,
-      marginTop: theme.spacing(2),
+      marginTop: theme.spacing(1),
       zIndex: 2
     }
   }),

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -69,6 +69,9 @@ const useStyles = makeStyles(theme => ({
   },
   root: {
     boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+  },
+  titleContainer: {
+    padding: theme.spacing(1.5, 3.5)
   }
 }));
 
@@ -97,7 +100,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
 
   return (
     <Card className={classes.root}>
-      <CardContent>
+      <CardContent className={classes.titleContainer}>
         <Typography color="textSecondary">
           <FormattedMessage
             defaultMessage="{numberOfSelected} columns selected out of {numberOfTotal}"

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -2,54 +2,68 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
-  action: {
+  theme => ({
-    flex: "0 0 auto",
+    action: {
-    [theme.breakpoints.down("sm")]: {
+      flex: "0 0 auto",
-      marginTop: theme.spacing()
+      [theme.breakpoints.down("sm")]: {
+        marginTop: theme.spacing()
+      }
+    },
+    block: {
+      [theme.breakpoints.down("sm")]: {
+        "&&": {
+          display: "block"
+        }
+      }
+    },
+    grid: {
+      padding: theme.spacing(2)
+    },
+    menuButton: {
+      flex: "0 0 auto",
+      marginLeft: -theme.spacing(2),
+      marginRight: theme.spacing(3),
+      marginTop: -theme.spacing(2)
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(3)
+    },
+    subtitle: {
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(2)
+    },
+    title: {
+      flex: 1,
+      paddingBottom: theme.spacing(2)
     }
-  },
+  }),
-  grid: {
+  {
-    padding: theme.spacing(2)
+    name: "ExtendedPageHeader"
-  },
-  menuButton: {
-    flex: "0 0 auto",
-    marginLeft: -theme.spacing(2),
-    marginRight: theme.spacing(3),
-    marginTop: -theme.spacing(2)
-  },
-  root: {
-    alignItems: "center",
-    display: "flex",
-    marginBottom: theme.spacing(3),
-    [theme.breakpoints.down("sm")]: {
-      display: "block"
-    }
-  },
-  subtitle: {
-    alignItems: "center",
-    display: "flex",
-    marginBottom: theme.spacing(2)
-  },
-  title: {
-    flex: 1,
-    paddingBottom: theme.spacing(2)
   }
-}));
+);
 
 interface ExtendedPageHeaderProps {
   children?: React.ReactNode;
   className?: string;
+  inline?: boolean;
   title?: React.ReactNode;
 }
 
 const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
-  const { children, className, title } = props;
+  const { children, className, inline, title } = props;
 
   const classes = useStyles(props);
 
   return (
-    <div className={classNames(classes.root, className)}>
+    <div
+      className={classNames(classes.root, className, {
+        [classes.block]: !inline
+      })}
+    >
       {title}
       <div className={classes.action}>{children}</div>
     </div>

src/components/PageHeader/PageHeader.tsx

@@ -15,26 +15,28 @@ const useStyles = makeStyles(theme => ({
       marginTop: theme.spacing(2),
       padding: 0
     },
+    alignSelf: "flex-start",
     flex: 1,
-    fontSize: 24,
+    fontSize: 24
-    paddingBottom: theme.spacing(2)
   }
 }));
 
 interface PageHeaderProps {
   children?: React.ReactNode;
   className?: string;
+  inline?: boolean;
   title?: string;
 }
 
 const PageHeader: React.FC<PageHeaderProps> = props => {
-  const { children, className, title } = props;
+  const { children, className, inline, title } = props;
 
   const classes = useStyles(props);
 
   return (
     <ExtendedPageHeader
       className={className}
+      inline={inline}
       title={
         <Typography className={classes.title} variant="h5">
           {title !== undefined ? title : <Skeleton style={{ width: "10em" }} />}

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -23,16 +23,21 @@ import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 import OrderPayment from "../OrderPayment/OrderPayment";
 import OrderUnfulfilledItems from "../OrderUnfulfilledItems/OrderUnfulfilledItems";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
-  date: {
+  theme => ({
-    marginBottom: theme.spacing(3),
+    date: {
-    marginTop: -theme.spacing(2)
+      marginBottom: theme.spacing(3),
-  },
+      marginTop: -theme.spacing(2)
-  header: {
+    },
-    display: "flex",
+    header: {
-    marginBottom: 0
+      display: "flex",
+      marginBottom: 0
+    }
+  }),
+  {
+    name: "OrderDetailsPage"
   }
-}));
+);
 
 export interface OrderDetailsPageProps extends UserPermissionProps {
   order: OrderDetails_order;
@@ -96,6 +101,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
       </AppHeader>
       <PageHeader
         className={classes.header}
+        inline
         title={maybe(() => order.number) ? "#" + order.number : undefined}
       >
         {canCancel && (

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -25,10 +25,10 @@ import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 
 const useStyles = makeStyles(theme => ({
   date: {
-    marginBottom: theme.spacing(3),
+    marginBottom: theme.spacing(3)
-    marginLeft: theme.spacing(7)
   },
   header: {
+    display: "flex",
     marginBottom: 0
   }
 }));
@@ -99,6 +99,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
       </AppHeader>
       <PageHeader
         className={classes.header}
+        inline
         title={maybe(() => order.number) ? "#" + order.number : undefined}
       >
         <CardMenu