From 3bfed3216e0673cc1b121f33dae2f6de5f0ff53c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Tue, 1 Feb 2022 14:59:42 +0100
Subject: [PATCH] Fix order line overflowing texts (#1788) (#1810)

* Fix overflowing order line cells

* Update snapshots
---
 .../OrderFulfilledProductsCard/styles.ts      |   6 +
 .../OrderProductsCardHeader.tsx               |  85 ++-
 .../OrderProductsTableRow.tsx                 |  17 +-
 .../OrderUnfulfilledProductsCard.tsx          |   6 +
 .../__snapshots__/Stories.test.ts.snap        | 663 ++++++++++++++++++
 5 files changed, 727 insertions(+), 50 deletions(-)

diff --git a/src/orders/components/OrderFulfilledProductsCard/styles.ts b/src/orders/components/OrderFulfilledProductsCard/styles.ts
index bfa3c5284..e4ef5dbac 100644
--- a/src/orders/components/OrderFulfilledProductsCard/styles.ts
+++ b/src/orders/components/OrderFulfilledProductsCard/styles.ts
@@ -13,6 +13,12 @@ const useStyles = makeStyles(
       width: 40
     },
     table: {
+      "& td, & th": {
+        "&:not(:first-child):not(:last-child)": {
+          paddingLeft: theme.spacing(1),
+          paddingRight: theme.spacing(1)
+        }
+      },
       tableLayout: "fixed"
     },
     infoLabel: {
diff --git a/src/orders/components/OrderProductsCardElements/OrderProductsCardHeader.tsx b/src/orders/components/OrderProductsCardElements/OrderProductsCardHeader.tsx
index 70e04e43a..5acb91a3e 100644
--- a/src/orders/components/OrderProductsCardElements/OrderProductsCardHeader.tsx
+++ b/src/orders/components/OrderProductsCardElements/OrderProductsCardHeader.tsx
@@ -14,20 +14,20 @@ const useStyles = makeStyles(
     },
     colPrice: {
       textAlign: "right",
-      width: 120
+      width: 150
     },
     colQuantity: {
       textAlign: "center",
-      width: 120
+      width: 110
     },
     colSku: {
       textAlign: "right",
       textOverflow: "ellipsis",
-      width: 120
+      width: 140
     },
     colTotal: {
       textAlign: "right",
-      width: 120
+      width: 170
     },
     infoLabel: {
       display: "inline-block"
@@ -56,40 +56,49 @@ const TableHeader = () => {
   const classes = useStyles({});
 
   return (
-    <TableHead>
-      <TableRow>
-        <TableCell className={classes.colName}>
-          <FormattedMessage
-            defaultMessage="Product"
-            description="product name"
-          />
-        </TableCell>
-        <TableCell className={classes.colSku}>
-          <FormattedMessage
-            defaultMessage="SKU"
-            description="ordered product sku"
-          />
-        </TableCell>
-        <TableCell className={classes.colQuantity}>
-          <FormattedMessage
-            defaultMessage="Quantity"
-            description="ordered product quantity"
-          />
-        </TableCell>
-        <TableCell className={classes.colPrice}>
-          <FormattedMessage
-            defaultMessage="Price"
-            description="product price"
-          />
-        </TableCell>
-        <TableCell className={classes.colTotal}>
-          <FormattedMessage
-            defaultMessage="Total"
-            description="order line total price"
-          />
-        </TableCell>
-      </TableRow>
-    </TableHead>
+    <>
+      <colgroup>
+        <col className={classes.colName} />
+        <col className={classes.colSku} />
+        <col className={classes.colQuantity} />
+        <col className={classes.colPrice} />
+        <col className={classes.colTotal} />
+      </colgroup>
+      <TableHead>
+        <TableRow>
+          <TableCell className={classes.colName}>
+            <FormattedMessage
+              defaultMessage="Product"
+              description="product name"
+            />
+          </TableCell>
+          <TableCell className={classes.colSku}>
+            <FormattedMessage
+              defaultMessage="SKU"
+              description="ordered product sku"
+            />
+          </TableCell>
+          <TableCell className={classes.colQuantity}>
+            <FormattedMessage
+              defaultMessage="Quantity"
+              description="ordered product quantity"
+            />
+          </TableCell>
+          <TableCell className={classes.colPrice}>
+            <FormattedMessage
+              defaultMessage="Price"
+              description="product price"
+            />
+          </TableCell>
+          <TableCell className={classes.colTotal}>
+            <FormattedMessage
+              defaultMessage="Total"
+              description="order line total price"
+            />
+          </TableCell>
+        </TableRow>
+      </TableHead>
+    </>
   );
 };
 
diff --git a/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx b/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
index f3faf42ba..d15c17aa3 100644
--- a/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
+++ b/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
@@ -13,26 +13,22 @@ import React from "react";
 
 const useStyles = makeStyles(
   theme => ({
-    colName: {
-      width: "auto"
-    },
+    colName: {},
     colNameLabel: {
       marginLeft: AVATAR_MARGIN
     },
     colPrice: {
-      width: 120
+      textAlign: "right"
     },
     colQuantity: {
-      textAlign: "center",
-      width: 120
+      textAlign: "center"
     },
     colSku: {
       textAlign: "right",
-      textOverflow: "ellipsis",
-      width: 120
+      textOverflow: "ellipsis"
     },
     colTotal: {
-      width: 120
+      textAlign: "right"
     },
     infoLabel: {
       display: "inline-block"
@@ -49,9 +45,6 @@ const useStyles = makeStyles(
     },
     statusBar: {
       paddingTop: 0
-    },
-    table: {
-      tableLayout: "fixed"
     }
   }),
   { name: "TableLine" }
diff --git a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
index fb32f6755..eeb2f08c3 100644
--- a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
+++ b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
@@ -19,6 +19,12 @@ const useStyles = makeStyles(
       padding: theme.spacing(2, 3)
     },
     table: {
+      "& td, & th": {
+        "&:not(:first-child):not(:last-child)": {
+          paddingLeft: theme.spacing(1),
+          paddingRight: theme.spacing(1)
+        }
+      },
       tableLayout: "fixed"
     }
   }),
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index ccc598531..a4fc76dee 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -110813,6 +110813,23 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -110969,6 +110986,23 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -111125,6 +111159,23 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -112597,6 +112648,23 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -112801,6 +112869,23 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -113005,6 +113090,23 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -114571,6 +114673,23 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -114775,6 +114894,23 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -114979,6 +115115,23 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -117180,6 +117333,23 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -117384,6 +117554,23 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -117588,6 +117775,23 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -119154,6 +119358,23 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -119358,6 +119579,23 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -119562,6 +119800,23 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -121126,6 +121381,23 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -121330,6 +121602,23 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -121534,6 +121823,23 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -123092,6 +123398,23 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -123296,6 +123619,23 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -123500,6 +123840,23 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -125066,6 +125423,23 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -125270,6 +125644,23 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -125474,6 +125865,23 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -127040,6 +127448,23 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -127244,6 +127669,23 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -127448,6 +127890,23 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -129014,6 +129473,23 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -129218,6 +129694,23 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -129422,6 +129915,23 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -130988,6 +131498,23 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -131192,6 +131719,23 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -131396,6 +131940,23 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -132962,6 +133523,23 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -133166,6 +133744,23 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -133370,6 +133965,23 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -134936,6 +135548,23 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderUnfulfilledItems-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -135140,6 +135769,23 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -135344,6 +135990,23 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               <table
                 class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
               >
+                <colgroup>
+                  <col
+                    class="TableHeader-colName-id"
+                  />
+                  <col
+                    class="TableHeader-colSku-id"
+                  />
+                  <col
+                    class="TableHeader-colQuantity-id"
+                  />
+                  <col
+                    class="TableHeader-colPrice-id"
+                  />
+                  <col
+                    class="TableHeader-colTotal-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >