Merge pull request #723 from mirumee/fix/responsive-tables

Fix table horizontal scroll

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/ControlledCheckbox.tsx

@@ -23,7 +23,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
     disabled={disabled}
     control={
       <Checkbox
-        checked={checked}
+        checked={!!checked}
         disabled={disabled}
         name={name}
         onChange={() => onChange({ target: { name, value: !checked } })}

src/components/ResponsiveTable/ResponsiveTable.tsx

@@ -5,8 +5,8 @@ import React from "react";
 const useStyles = makeStyles(
   theme => ({
     root: {
-      [theme.breakpoints.up("sm")]: {
-        "& table": {
+      [theme.breakpoints.up("md")]: {
+        "&& 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,7 +27,13 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { OrderList_orders_edges_node } from "../../types/OrderList";
 
 const useStyles = makeStyles(
-  theme => ({
+  theme => {
+    const overflowing: CSSProperties = {
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    };
+
+    return {
       [theme.breakpoints.up("lg")]: {
         colCustomer: {
           width: 220
@@ -43,18 +50,19 @@ const useStyles = makeStyles(
         },
         colTotal: {}
       },
-    colCustomer: {},
+      colCustomer: overflowing,
       colDate: {},
-    colFulfillment: {},
+      colFulfillment: overflowing,
       colNumber: {},
-    colPayment: {},
+      colPayment: overflowing,
       colTotal: {
         textAlign: "right"
       },
       link: {
         cursor: "pointer"
       }
-  }),
+    };
+  },
   { name: "OrderList" }
 );