diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 703a33a2c..9c1fc3f35 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/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: { diff --git a/src/components/ResponsiveTable/ResponsiveTable.tsx b/src/components/ResponsiveTable/ResponsiveTable.tsx index 23cd083a9..8538ab6b1 100644 --- a/src/components/ResponsiveTable/ResponsiveTable.tsx +++ b/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" } }, diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx index 7a2dca9a6..bf751a779 100644 --- a/src/orders/components/OrderList/OrderList.tsx +++ b/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.breakpoints.up("lg")]: { - colCustomer: { - width: 220 + theme => { + const overflowing: CSSProperties = { + overflow: "hidden", + 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: { - width: 230 + colFulfillment: overflowing, + colNumber: {}, + colPayment: overflowing, + colTotal: { + textAlign: "right" }, - colNumber: { - width: 120 - }, - colPayment: { - width: 220 - }, - colTotal: {} - }, - colCustomer: {}, - colDate: {}, - colFulfillment: {}, - colNumber: {}, - colPayment: {}, - colTotal: { - textAlign: "right" - }, - link: { - cursor: "pointer" - } - }), + link: { + cursor: "pointer" + } + }; + }, { name: "OrderList" } );