Fix table horizontal scrolling

src/components/AppLayout/AppLayout.tsx

@@ -75,9 +75,10 @@ const useStyles = makeStyles(
         height: "auto"
       }
     },
-
     root: {
-      display: "flex",
+      [theme.breakpoints.up("md")]: {
+        display: "flex"
+      },
       width: `100%`
     },
     spacer: {

src/components/ResponsiveTable/ResponsiveTable.tsx

@@ -5,8 +5,8 @@ import React from "react";
 const useStyles = makeStyles(
   theme => ({
     root: {
-      [theme.breakpoints.up("sm")]: {
+      [theme.breakpoints.up("md")]: {
-        "& table": {
+        "&& table": {
           tableLayout: "fixed"
         }
       },

src/orders/components/OrderList/OrderList.tsx

@@ -4,6 +4,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
+import { CSSProperties } from "@material-ui/styles";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
@@ -26,35 +27,42 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { OrderList_orders_edges_node } from "../../types/OrderList";
 
 const useStyles = makeStyles(
-  theme => ({
+  theme => {
-    [theme.breakpoints.up("lg")]: {
+    const overflowing: CSSProperties = {
-      colCustomer: {
+      overflow: "hidden",
-        width: 220
+      textOverflow: "ellipsis"
+    };
+
+    return {
+      [theme.breakpoints.up("lg")]: {
+        colCustomer: {
+          width: 220
+        },
+        colDate: {},
+        colFulfillment: {
+          width: 230
+        },
+        colNumber: {
+          width: 120
+        },
+        colPayment: {
+          width: 220
+        },
+        colTotal: {}
       },
+      colCustomer: overflowing,
       colDate: {},
-      colFulfillment: {
+      colFulfillment: overflowing,
-        width: 230
+      colNumber: {},
+      colPayment: overflowing,
+      colTotal: {
+        textAlign: "right"
       },
-      colNumber: {
+      link: {
-        width: 120
+        cursor: "pointer"
-      },
+      }
-      colPayment: {
+    };
-        width: 220
+  },
-      },
-      colTotal: {}
-    },
-    colCustomer: {},
-    colDate: {},
-    colFulfillment: {},
-    colNumber: {},
-    colPayment: {},
-    colTotal: {
-      textAlign: "right"
-    },
-    link: {
-      cursor: "pointer"
-    }
-  }),
   { name: "OrderList" }
 );