Merge pull request #240 from mirumee/improve-mobile-appearance

Improve mobile appearance

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update customer's details page design - #248 by @dominik-zeglen
 - Use Apollo Hooks - #254 by @dominik-zeglen
 - Fix disappearing products description - #259 by @dominik-zeglen
+- Improve mobile appearance - #240 by @benekex2 and @dominik-zeglen
 
 ## 2.0.0
 

src/attributes/components/AttributeList/AttributeList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -75,7 +75,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -207,7 +207,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 AttributeList.displayName = "AttributeList";

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -80,7 +80,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.columnDrag} />
@@ -138,7 +138,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/categories/components/CategoryList/CategoryList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import { FormattedMessage } from "react-intl";
 
 import { CategoryFragment } from "@saleor/categories/types/CategoryFragment";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -73,7 +73,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -1,11 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -98,7 +98,7 @@ export const CategoryProductList: React.FC<
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -229,7 +229,7 @@ export const CategoryProductList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };

src/collections/components/CollectionList/CollectionList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -68,7 +68,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -114,7 +114,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
           </Button>
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -232,7 +232,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/components/AppHeader/AppHeader.tsx

@@ -30,7 +30,10 @@ const useStyles = makeStyles(theme => ({
     cursor: "pointer",
     display: "flex",
     marginTop: theme.spacing(0.5),
-    transition: theme.transitions.duration.standard + "ms"
+    transition: theme.transitions.duration.standard + "ms",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   },
   skeleton: {
     marginBottom: theme.spacing(2),
@@ -40,9 +43,13 @@ const useStyles = makeStyles(theme => ({
     color: "inherit",
     flex: 1,
     marginLeft: theme.spacing(),
-    textTransform: "uppercase"
+    textTransform: "uppercase",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   }
 }));
+
 const AppHeader: React.FC<AppHeaderProps> = props => {
   const { children, onBack } = props;
 

src/components/AppLayout/AppLayout.tsx

@@ -64,6 +64,12 @@ const useStyles = makeStyles(
       marginLeft: theme.spacing(2),
       transition: theme.transitions.duration.standard + "ms"
     },
+    avatar: {
+      "&&": {
+        height: 32,
+        width: 32
+      }
+    },
     content: {
       [theme.breakpoints.down("sm")]: {
         paddingLeft: 0
@@ -79,9 +85,16 @@ const useStyles = makeStyles(
       paddingLeft: drawerWidth
     },
     darkThemeSwitch: {
+      [theme.breakpoints.down("sm")]: {
+        marginRight: -theme.spacing(1.5)
+      },
       marginRight: theme.spacing(2)
     },
     header: {
+      [theme.breakpoints.down("sm")]: {
+        height: 88,
+        marginBottom: 0
+      },
       display: "flex",
       height: 40,
       marginBottom: theme.spacing(3)
@@ -179,6 +192,9 @@ const useStyles = makeStyles(
       [theme.breakpoints.up("md")]: {
         display: "none"
       },
+      [theme.breakpoints.down("sm")]: {
+        left: 0
+      },
       background: theme.palette.background.paper,
       borderRadius: "50%",
       cursor: "pointer",
@@ -239,12 +255,20 @@ const useStyles = makeStyles(
       flex: 1
     },
     userBar: {
+      [theme.breakpoints.down("sm")]: {
+        alignItems: "flex-end",
+        flexDirection: "column-reverse",
+        overflow: "hidden"
+      },
       alignItems: "center",
       display: "flex"
     },
     userChip: {
       backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary
+      borderRadius: 24,
+      color: theme.palette.text.primary,
+      height: 40,
+      padding: theme.spacing(0.5)
     },
     userMenuContainer: {
       position: "relative"
@@ -415,6 +439,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                               <Avatar alt="user" src={user.avatar.url} />
                             )
                           }
+                          classes={{
+                            avatar: classes.avatar
+                          }}
                           className={classes.userChip}
                           label={
                             <>
@@ -433,7 +460,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           open={isMenuOpened}
                           anchorEl={anchor.current}
                           transition
-                          disablePortal
                           placement="bottom-end"
                         >
                           {({ TransitionProps, placement }) => (

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,7 @@ 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 } from "./consts";
+import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
@@ -20,15 +20,15 @@ const useStyles = makeStyles(theme => ({
     right: 0,
     top: 0,
     transition: `right  ${theme.transitions.duration.shorter}ms ease`,
-    width: 300,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   menuListNestedClose: {
     "& svg": {
       fill: theme.palette.primary.main,
-      left: 7,
+      left: 11,
       position: "relative",
-      top: -2
+      top: 1
     },
     border: `solid 1px #EAEAEA`,
     borderRadius: "100%",
@@ -71,10 +71,11 @@ const useStyles = makeStyles(theme => ({
   menuListNestedOpen: {
     [theme.breakpoints.down("sm")]: {
       right: 0,
-      width: drawerWidthExpanded,
+      width: drawerWidthExpandedMobile,
       zIndex: 2
     },
-    right: -300,
+    right: -drawerNestedMenuWidth,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   subHeader: {

src/components/AppLayout/ResponsiveDrawer.tsx

@@ -2,7 +2,11 @@ import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
-import { drawerWidth, drawerWidthExpanded } from "./consts";
+import {
+  drawerWidth,
+  drawerWidthExpanded,
+  drawerWidthExpandedMobile
+} from "./consts";
 
 const useStyles = makeStyles(
   theme => ({
@@ -22,7 +26,7 @@ const useStyles = makeStyles(
       width: drawerWidth
     },
     drawerMobile: {
-      width: drawerWidthExpanded
+      width: drawerWidthExpandedMobile
     }
   }),
   { name: "ResponsiveDrawer" }

src/components/AppLayout/consts.ts

@@ -1,4 +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/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -17,6 +16,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
@@ -123,7 +123,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             {categories &&
               categories.map(category => {
@@ -156,7 +156,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
                 );
               })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -13,6 +12,7 @@ import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_search_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
@@ -123,7 +123,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             {collections &&
               collections.map(collection => {
@@ -156,7 +156,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
                 );
               })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -17,6 +16,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
@@ -131,7 +131,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
         />
         <FormSpacer />
         <div className={classes.scrollArea}>
-          <Table>
+          <ResponsiveTable>
             <TableBody>
               {products &&
                 products.map(product => {
@@ -168,7 +168,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                   );
                 })}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </div>
       </DialogContent>
       <DialogActions>

src/components/ColumnPicker/ColumnPicker.tsx

@@ -28,8 +28,8 @@ 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: 1
+      zIndex: 2
     }
   }),
   {

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   content: {
+    [theme.breakpoints.down("sm")]: {
+      gridTemplateColumns: "repeat(2, 1fr)"
+    },
     display: "grid",
     gridColumnGap: theme.spacing(3),
     gridTemplateColumns: "repeat(3, 1fr)",
@@ -66,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)
   }
 }));
 
@@ -94,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/Container.tsx

@@ -2,19 +2,24 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
-  root: {
+  theme => ({
-    [theme.breakpoints.up("lg")]: {
+    root: {
-      marginLeft: "auto",
+      [theme.breakpoints.up("lg")]: {
-      marginRight: "auto",
+        marginLeft: "auto",
-      maxWidth: theme.breakpoints.width("lg")
+        marginRight: "auto",
-    },
+        maxWidth: theme.breakpoints.width("lg")
-    [theme.breakpoints.up("sm")]: {
+      },
-      padding: theme.spacing(0, 3)
+      [theme.breakpoints.up("sm")]: {
-    },
+        padding: theme.spacing(0, 3)
-    padding: theme.spacing(0, 1)
+      },
+      padding: theme.spacing(0, 1)
+    }
+  }),
+  {
+    name: "Container"
   }
-}));
+);
 
 interface ContainerProps {
   className?: string;

src/components/CountryList/CountryList.tsx

@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -14,6 +13,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../misc";
 import { CountryFragment } from "../../taxes/types/CountryFragment";
@@ -100,7 +100,7 @@ const CountryList: React.FC<CountryListProps> = props => {
         }
       />
       <CardContent className={classes.root}>
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             <TableRow className={classes.pointer} onClick={toggleCollapse}>
               <TableCell
@@ -173,7 +173,7 @@ const CountryList: React.FC<CountryListProps> = props => {
                 )
               )}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </CardContent>
     </Card>
   );

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -2,48 +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: {
-  },
+      flex: "0 0 auto",
-  grid: {
+      [theme.breakpoints.down("sm")]: {
-    padding: theme.spacing(2)
+        marginTop: theme.spacing()
-  },
+      }
-  menuButton: {
+    },
-    flex: "0 0 auto",
+    block: {
-    marginLeft: -theme.spacing(2),
+      [theme.breakpoints.down("sm")]: {
-    marginRight: theme.spacing(3),
+        "&&": {
-    marginTop: -theme.spacing(2)
+          display: "block"
-  },
+        }
-  root: {
+      }
-    alignItems: "center",
+    },
-    display: "flex",
+    grid: {
-    marginBottom: theme.spacing(3)
+      padding: theme.spacing(2)
-  },
+    },
-  subtitle: {
+    menuButton: {
-    alignItems: "center",
+      flex: "0 0 auto",
-    display: "flex",
+      marginLeft: -theme.spacing(2),
-    marginBottom: theme.spacing(2)
+      marginRight: theme.spacing(3),
-  },
+      marginTop: -theme.spacing(2)
-  title: {
+    },
-    flex: 1,
+    root: {
-    paddingBottom: theme.spacing(2)
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(3)
+    },
+    subtitle: {
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(2)
+    },
+    title: {
+      flex: 1,
+      paddingBottom: theme.spacing(2)
+    }
+  }),
+  {
+    name: "ExtendedPageHeader"
   }
-}));
+);
 
 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

@@ -10,26 +10,33 @@ const useStyles = makeStyles(theme => ({
     display: "flex"
   },
   title: {
+    [theme.breakpoints.down("sm")]: {
+      fontSize: 20,
+      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/components/ResponsiveTable/ResponsiveTable.tsx

@@ -0,0 +1,44 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import Table from "@material-ui/core/Table";
+import React from "react";
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      [theme.breakpoints.up("sm")]: {
+        "& table": {
+          tableLayout: "fixed"
+        }
+      },
+      "& table": {
+        tableLayout: "auto"
+      },
+      overflowX: "auto",
+      width: "100%"
+    }
+  }),
+  {
+    name: "ResponsiveTable"
+  }
+);
+
+interface ResponsiveTableProps {
+  children: React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  key?: string;
+}
+
+const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
+  const { children, className } = props;
+
+  const classes = useStyles(props);
+
+  return (
+    <div className={classes.root}>
+      <Table className={className}>{children}</Table>
+    </div>
+  );
+};
+
+ResponsiveTable.displayName = "ResponsiveTable";
+export default ResponsiveTable;

src/components/ResponsiveTable/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ResponsiveTable";
+export * from "./ResponsiveTable";

src/components/TableCellHeader/TableCellHeader.stories.tsx

@@ -1,5 +1,4 @@
 import Card from "@material-ui/core/Card";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -7,6 +6,7 @@ import TableRow from "@material-ui/core/TableRow";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Decorator from "../../storybook/Decorator";
 import TableCellHeader, {
   TableCellHeaderArrowDirection
@@ -25,7 +25,7 @@ const Story: React.FC<StoryProps> = ({
   onHeaderClick = () => undefined
 }) => (
   <Card style={{ margin: "auto", width: 400 }}>
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCellHeader
@@ -49,7 +49,7 @@ const Story: React.FC<StoryProps> = ({
           <TableCell>Juice</TableCell>
         </TableRow>
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   </Card>
 );
 const InteractiveStory: React.FC = () => {

src/components/Theme/ThemeProvider.tsx

@@ -1,5 +1,6 @@
 import { MuiThemeProvider } from "@material-ui/core/styles";
 import React from "react";
+import Helmet from "react-helmet";
 
 import Baseline from "../../Baseline";
 import createTheme from "../../theme";
@@ -27,6 +28,8 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({
     localStorage.setItem("theme", (!isDark).toString());
   };
 
+  const theme = createTheme(isDark ? dark : light);
+
   return (
     <ThemeContext.Provider
       value={{
@@ -34,7 +37,10 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({
         toggleTheme
       }}
     >
-      <MuiThemeProvider theme={createTheme(isDark ? dark : light)}>
+      <Helmet>
+        <meta name="theme-color" content={theme.palette.background.default} />
+      </Helmet>
+      <MuiThemeProvider theme={theme}>
         <Baseline />
         {children}
       </MuiThemeProvider>

src/configuration/ConfigurationPage.tsx

@@ -61,6 +61,9 @@ const useStyles = makeStyles(theme => ({
     paddingTop: theme.spacing(3)
   },
   configurationItem: {
+    [theme.breakpoints.down("md")]: {
+      gridTemplateColumns: "1fr"
+    },
     display: "grid",
     gridColumnGap: theme.spacing(4),
     gridTemplateColumns: "1fr 1fr"

src/customers/components/CustomerList/CustomerList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -61,7 +61,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -141,7 +141,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 CustomerList.displayName = "CustomerList";

src/customers/components/CustomerOrders/CustomerOrders.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
@@ -60,7 +60,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -143,7 +143,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/DiscountCategories/DiscountCategories.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -84,7 +84,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -173,7 +173,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/DiscountCollections/DiscountCollections.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -84,7 +84,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -173,7 +173,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import ConfirmButton, {
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 // tslint:disable no-submodule-imports
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
@@ -122,7 +122,7 @@ const DiscountCountrySelectDialog: React.FC<
                     description="country selection"
                   />
                 </Typography>
-                <Table>
+                <ResponsiveTable>
                   <TableBody>
                     {filter(countries, data.query, {
                       key: "country"
@@ -164,7 +164,7 @@ const DiscountCountrySelectDialog: React.FC<
                       );
                     })}
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -98,7 +98,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -212,7 +212,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/SaleList/SaleList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Percent from "@saleor/components/Percent";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -77,7 +77,7 @@ const SaleList: React.FC<SaleListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -189,7 +189,7 @@ const SaleList: React.FC<SaleListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 SaleList.displayName = "SaleList";

src/discounts/components/VoucherList/VoucherList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Percent from "@saleor/components/Percent";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -92,7 +92,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -240,7 +240,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 VoucherList.displayName = "VoucherList";

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -10,6 +9,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import RequirePermissions from "@saleor/components/RequirePermissions";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
@@ -47,7 +47,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableBody className={classes.tableRow}>
           <RequirePermissions
             userPermissions={userPermissions}
@@ -150,7 +150,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
             </TableRow>
           </RequirePermissions>
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/home/components/HomeProductListCard/HomeProductListCard.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
@@ -58,7 +58,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
           id: "homeProductsListCardHeader"
         })}
       />
-      <Table>
+      <ResponsiveTable>
         <TableBody>
           {renderCollection(
             topProducts,
@@ -139,7 +139,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/navigation/components/MenuList/MenuList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -65,7 +65,7 @@ const MenuList: React.FC<MenuListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -156,7 +156,7 @@ const MenuList: React.FC<MenuListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -23,15 +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: {
+    },
-    marginBottom: 0
+    header: {
+      display: "flex",
+      marginBottom: 0
+    }
+  }),
+  {
+    name: "OrderDetailsPage"
   }
-}));
+);
 
 export interface OrderDetailsPageProps extends UserPermissionProps {
   order: OrderDetails_order;
@@ -95,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/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx

@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -14,6 +13,7 @@ import { FormattedMessage } from "react-intl";
 import { DebounceForm } from "@saleor/components/DebounceForm";
 import Form from "@saleor/components/Form";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar, {
   AVATAR_MARGIN
@@ -76,7 +76,7 @@ const OrderDraftDetailsProducts: React.FC<
   const classes = useStyles(props);
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       {maybe(() => !!lines.length) && (
         <TableHead>
           <TableRow>
@@ -187,7 +187,7 @@ const OrderDraftDetailsProducts: React.FC<
           ))
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderDraftDetailsProducts.displayName = "OrderDraftDetailsProducts";

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -83,7 +83,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
     : undefined;
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -194,7 +194,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderDraftList.displayName = "OrderDraftList";

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

src/orders/components/OrderFulfillment/OrderFulfillment.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardMenu from "@saleor/components/CardMenu";
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -142,7 +142,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
           )
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colName}>
@@ -226,7 +226,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
       {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (
         <CardActions>
           <Button color="primary" onClick={onTrackingCodeAdd}>

src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -18,6 +17,7 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar, {
   AVATAR_MARGIN
 } from "@saleor/components/TableCellAvatar";
@@ -111,7 +111,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                   description="dialog header"
                 />
               </DialogTitle>
-              <Table className={classes.table}>
+              <ResponsiveTable className={classes.table}>
                 <TableHead>
                   <TableRow>
                     <TableCell className={classes.colName}>
@@ -174,7 +174,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                     );
                   })}
                 </TableBody>
-              </Table>
+              </ResponsiveTable>
               <DialogContent>
                 <FormSpacer />
                 <TextField

src/orders/components/OrderList/OrderList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -87,7 +87,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
       }))
     : undefined;
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -232,7 +232,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderList.displayName = "OrderList";

src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -19,6 +18,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
@@ -227,7 +227,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
           }
           threshold={10}
         >
-          <Table key="table">
+          <ResponsiveTable key="table">
             <TableBody>
               {renderCollection(
                 products,
@@ -316,7 +316,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
                 )
               )}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>

src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -83,7 +83,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
           />
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colName}>
@@ -160,7 +160,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
             </TableRow>
           ))}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
       {canFulfill && (
         <CardActions>
           <Button variant="text" color="primary" onClick={onFulfill}>

src/pages/components/PageList/PageList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -65,7 +65,7 @@ const PageList: React.FC<PageListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -169,7 +169,7 @@ const PageList: React.FC<PageListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/plugins/components/PluginsList/PluginsList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TablePagination from "@saleor/components/TablePagination";
@@ -59,7 +59,7 @@ const PluginList: React.FC<PluginListProps> = props => {
   const intl = useIntl();
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableCell className={classes.colName}>
             {intl.formatMessage({
@@ -139,7 +139,7 @@ const PluginList: React.FC<PluginListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -6,7 +6,6 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useElementScroll, {
   isScrolledToBottom
 } from "@saleor/hooks/useElementScroll";
@@ -136,7 +136,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           threshold={100}
           key="infinite-scroll"
         >
-          <Table key="table">
+          <ResponsiveTable key="table">
             <TableBody>
               {renderCollection(
                 attributes,
@@ -178,7 +178,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
                   )
               )}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </InfiniteScroll>
       </DialogContent>
       {errors.length > 0 && (

src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -111,7 +111,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           disabled={disabled}
@@ -196,7 +196,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -61,7 +61,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -185,7 +185,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 ProductTypeList.displayName = "ProductTypeList";

src/products/components/ProductList/ProductList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -131,7 +131,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -392,7 +392,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -10,6 +9,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
@@ -64,7 +64,7 @@ const ProductVariantNavigation: React.FC<
           description: "section header"
         })}
       />
-      <Table>
+      <ResponsiveTable>
         <TableBody>
           {renderCollection(variants, variant => (
             <TableRow
@@ -110,7 +110,7 @@ const ProductVariantNavigation: React.FC<
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/products/components/ProductVariants/ProductVariants.tsx

@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Hidden from "@material-ui/core/Hidden";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -133,7 +133,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
         </CardContent>
       )}
       {hasVariants && (
-        <Table className={classes.denseTable}>
+        <ResponsiveTable className={classes.denseTable}>
           <TableHead
             colSpan={numberOfColumns}
             selected={selected}
@@ -237,7 +237,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
               );
             })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       )}
     </Card>
   );

src/services/components/ServiceList/ServiceList.tsx

@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@@ -68,7 +68,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       <TableHead>
         <TableRow>
           <TableCell className={classes.colName}>
@@ -154,7 +154,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 ServiceList.displayName = "ServiceList";

src/services/components/ServiceTokens/ServiceTokens.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ServiceDetailsFragment_tokens } from "@saleor/services/types/ServiceDetailsFragment";
@@ -64,7 +64,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colNote}>
@@ -117,7 +117,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import ConfirmButton, {
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
 
@@ -122,7 +122,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                 <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage defaultMessage="Quick Pick" />
                 </Typography>
-                <Table className={classes.table}>
+                <ResponsiveTable className={classes.table}>
                   <TableBody>
                     <TableRow>
                       <TableCell className={classes.wideCell}>
@@ -149,7 +149,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                       </TableCell>
                     </TableRow>
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
 
               <DialogContent className={classes.container}>
@@ -159,7 +159,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                     description="country selection"
                   />
                 </Typography>
-                <Table className={classes.table}>
+                <ResponsiveTable className={classes.table}>
                   <TableBody>
                     {filter(countries, data.query, {
                       key: "country"
@@ -201,7 +201,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                       );
                     })}
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>

src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -15,6 +14,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
 import Money from "@saleor/components/Money";
 import MoneyRange from "@saleor/components/MoneyRange";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import WeightRange from "@saleor/components/WeightRange";
 import { maybe, renderCollection } from "../../../misc";
@@ -82,7 +82,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.nameColumn}>
@@ -172,7 +172,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/shipping/components/ShippingZonesList/ShippingZonesList.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -88,7 +88,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -183,7 +183,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { authorizationKeyTypes, maybe, renderCollection } from "../../../misc";
 import { ICONBUTTON_SIZE } from "../../../theme";
@@ -58,7 +58,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -109,7 +109,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/staff/components/StaffList/StaffList.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import {
@@ -78,7 +78,7 @@ const StaffList: React.FC<StaffListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCell className={classes.wideColumn}>
@@ -167,7 +167,7 @@ const StaffList: React.FC<StaffListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 StaffList.displayName = "StaffList";

src/storybook/stories/components/EditableTableCell.tsx

@@ -1,4 +1,3 @@
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -7,6 +6,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import EditableTableCell from "@saleor/components/EditableTableCell";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
 
@@ -14,7 +14,7 @@ storiesOf("Generics / EditableTableCell", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableCell>Some header</TableCell>
         <TableCell>Some header</TableCell>
@@ -30,5 +30,5 @@ storiesOf("Generics / EditableTableCell", module)
           <TableCell>Some value</TableCell>
         </TableRow>
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   ));

src/storybook/stories/components/TablePagination.tsx

@@ -1,7 +1,7 @@
-import Table from "@material-ui/core/Table";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TablePagination from "@saleor/components/TablePagination";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
@@ -10,7 +10,7 @@ storiesOf("Generics / TablePagination", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("no previous / next page", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={false}
@@ -18,10 +18,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("previous page available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={false}
@@ -29,10 +29,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("next page available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={true}
@@ -40,10 +40,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("both previous and next pages are available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={true}
@@ -51,5 +51,5 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ));

src/taxes/components/CountryList/CountryList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -9,6 +8,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
 import { CountryList_shop_countries } from "../../types/CountryList";
@@ -34,7 +34,7 @@ const CountryList: React.FC<CountryListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -83,7 +83,7 @@ const CountryList: React.FC<CountryListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import AppHeader from "@saleor/components/AppHeader";
 import { Container } from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
 import { TaxRateType } from "@saleor/types/globalTypes";
@@ -165,7 +165,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
       <Grid>
         <div>
           <Card>
-            <Table>
+            <ResponsiveTable>
               <TableHead>
                 <TableRow>
                   <TableCell className={classes.wideColumn}>
@@ -206,7 +206,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
                   )
                 )}
               </TableBody>
-            </Table>
+            </ResponsiveTable>
           </Card>
         </div>
       </Grid>

src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx

@@ -1,6 +1,5 @@
 import { Omit } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { ListProps } from "../../../types";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "../../../misc";
@@ -58,7 +58,7 @@ const TranslationsEntitiesList: React.FC<
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCell className={classes.wideColumn}>
@@ -126,7 +126,7 @@ const TranslationsEntitiesList: React.FC<
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 TranslationsEntitiesList.displayName = "TranslationsEntitiesList";

src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -8,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
@@ -35,7 +35,7 @@ const TranslationsLanguageList: React.FC<
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -70,7 +70,7 @@ const TranslationsLanguageList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@@ -68,7 +68,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
   const classes = useStyles({});
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       <TableHead>
         <TableRow>
           <TableCell className={classes.colName}>
@@ -156,7 +156,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 WebhooksList.displayName = "WebhooksList";