From f400f1ae8984ebe41137307d4ff32e1e2da25b9b Mon Sep 17 00:00:00 2001
From: Jakub Majorek <majorek.jakub@gmail.com>
Date: Thu, 1 Apr 2021 14:31:23 +0200
Subject: [PATCH] Fix DOM nesting

---
 src/orders/components/OrderList/OrderList.tsx | 144 +++++++++---------
 1 file changed, 73 insertions(+), 71 deletions(-)

diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index 298cff3d3..193c27a71 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -99,77 +99,79 @@ export const OrderList: React.FC<OrderListProps> = props => {
   return (
     <ResponsiveTable>
       <TableHead>
-        <TableCellHeader
-          direction={
-            sort.sort === OrderListUrlSortField.number
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          arrowPosition="right"
-          onClick={() => onSort(OrderListUrlSortField.number)}
-          className={classes.colNumber}
-        >
-          <FormattedMessage defaultMessage="No. of Order" />
-        </TableCellHeader>
-        <TableCellHeader
-          direction={
-            sort.sort === OrderListUrlSortField.date
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          onClick={() => onSort(OrderListUrlSortField.date)}
-          className={classes.colDate}
-        >
-          <FormattedMessage
-            defaultMessage="Date"
-            description="date when order was placed"
-          />
-        </TableCellHeader>
-        <TableCellHeader
-          direction={
-            sort.sort === OrderListUrlSortField.customer
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          onClick={() => onSort(OrderListUrlSortField.customer)}
-          className={classes.colCustomer}
-        >
-          <FormattedMessage
-            defaultMessage="Customer"
-            description="e-mail or full name"
-          />
-        </TableCellHeader>
-        <TableCellHeader
-          direction={
-            sort.sort === OrderListUrlSortField.payment
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          onClick={() => onSort(OrderListUrlSortField.payment)}
-          className={classes.colPayment}
-        >
-          <FormattedMessage
-            defaultMessage="Payment"
-            description="payment status"
-          />
-        </TableCellHeader>
-        <TableCellHeader
-          direction={
-            sort.sort === OrderListUrlSortField.fulfillment
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          onClick={() => onSort(OrderListUrlSortField.fulfillment)}
-          className={classes.colFulfillment}
-        >
-          <FormattedMessage defaultMessage="Fulfillment status" />
-        </TableCellHeader>
-        <TableCellHeader textAlign="right" className={classes.colTotal}>
-          <FormattedMessage
-            defaultMessage="Total"
-            description="total order price"
-          />
-        </TableCellHeader>
+        <TableRow>
+          <TableCellHeader
+            direction={
+              sort.sort === OrderListUrlSortField.number
+                ? getArrowDirection(sort.asc)
+                : undefined
+            }
+            arrowPosition="right"
+            onClick={() => onSort(OrderListUrlSortField.number)}
+            className={classes.colNumber}
+          >
+            <FormattedMessage defaultMessage="No. of Order" />
+          </TableCellHeader>
+          <TableCellHeader
+            direction={
+              sort.sort === OrderListUrlSortField.date
+                ? getArrowDirection(sort.asc)
+                : undefined
+            }
+            onClick={() => onSort(OrderListUrlSortField.date)}
+            className={classes.colDate}
+          >
+            <FormattedMessage
+              defaultMessage="Date"
+              description="date when order was placed"
+            />
+          </TableCellHeader>
+          <TableCellHeader
+            direction={
+              sort.sort === OrderListUrlSortField.customer
+                ? getArrowDirection(sort.asc)
+                : undefined
+            }
+            onClick={() => onSort(OrderListUrlSortField.customer)}
+            className={classes.colCustomer}
+          >
+            <FormattedMessage
+              defaultMessage="Customer"
+              description="e-mail or full name"
+            />
+          </TableCellHeader>
+          <TableCellHeader
+            direction={
+              sort.sort === OrderListUrlSortField.payment
+                ? getArrowDirection(sort.asc)
+                : undefined
+            }
+            onClick={() => onSort(OrderListUrlSortField.payment)}
+            className={classes.colPayment}
+          >
+            <FormattedMessage
+              defaultMessage="Payment"
+              description="payment status"
+            />
+          </TableCellHeader>
+          <TableCellHeader
+            direction={
+              sort.sort === OrderListUrlSortField.fulfillment
+                ? getArrowDirection(sort.asc)
+                : undefined
+            }
+            onClick={() => onSort(OrderListUrlSortField.fulfillment)}
+            className={classes.colFulfillment}
+          >
+            <FormattedMessage defaultMessage="Fulfillment status" />
+          </TableCellHeader>
+          <TableCellHeader textAlign="right" className={classes.colTotal}>
+            <FormattedMessage
+              defaultMessage="Total"
+              description="total order price"
+            />
+          </TableCellHeader>
+        </TableRow>
       </TableHead>
       <TableFooter>
         <TableRow>