Fix order line overflowing texts (#1788) (#1810)

* Fix overflowing order line cells

* Update snapshots
This commit is contained in:
Dominik Żegleń 2022-02-01 14:59:42 +01:00 committed by GitHub
parent 44a8a1c182
commit 3bfed3216e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 727 additions and 50 deletions

View file

@ -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: {

View file

@ -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>
</>
);
};

View file

@ -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" }

View file

@ -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"
}
}),

View file

@ -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"
>