From 901ab2a50534a3913770d41fed66ec6488ac4369 Mon Sep 17 00:00:00 2001
From: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com>
Date: Mon, 20 Sep 2021 14:28:15 +0000
Subject: [PATCH] Fix products table content display (#1422)

---
 .../components/ProductList/ProductList.tsx    |   5 +-
 .../__snapshots__/Stories.test.ts.snap        | 202 +++++++++---------
 2 files changed, 103 insertions(+), 104 deletions(-)

diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 9d8d2798b..7e4ea1348 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -40,9 +40,9 @@ import { messages } from "./messages";
 
 const useStyles = makeStyles(
   theme => ({
-    [theme.breakpoints.up("lg")]: {
+    [theme.breakpoints.up("md")]: {
       colName: {
-        width: "auto"
+        minWidth: 250
       },
       colPrice: {
         width: 300
@@ -326,7 +326,6 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     />
                   </TableCell>
                   <TableCellAvatar
-                    className={classes.colName}
                     thumbnail={maybe(() => product.thumbnail.url)}
                   >
                     {product?.productType ? (
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index cf2791312..4496742dd 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -216170,7 +216170,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216273,7 +216273,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216376,7 +216376,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216479,7 +216479,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216582,7 +216582,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216685,7 +216685,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216788,7 +216788,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216891,7 +216891,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216994,7 +216994,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217097,7 +217097,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217200,7 +217200,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217303,7 +217303,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217406,7 +217406,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217509,7 +217509,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217612,7 +217612,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217715,7 +217715,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217818,7 +217818,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217921,7 +217921,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218024,7 +218024,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218127,7 +218127,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218729,7 +218729,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218832,7 +218832,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218935,7 +218935,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219038,7 +219038,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219141,7 +219141,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219244,7 +219244,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219347,7 +219347,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219450,7 +219450,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219553,7 +219553,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219656,7 +219656,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219759,7 +219759,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219862,7 +219862,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219965,7 +219965,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220068,7 +220068,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220171,7 +220171,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220274,7 +220274,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220377,7 +220377,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220480,7 +220480,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220583,7 +220583,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220686,7 +220686,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -221254,7 +221254,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
                   <div
                     class="Avatar-content-id"
@@ -221803,7 +221803,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -221891,7 +221891,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -221979,7 +221979,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222067,7 +222067,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222155,7 +222155,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222243,7 +222243,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222331,7 +222331,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222419,7 +222419,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222507,7 +222507,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222595,7 +222595,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222683,7 +222683,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222771,7 +222771,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222859,7 +222859,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -222947,7 +222947,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -223035,7 +223035,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -223123,7 +223123,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -223211,7 +223211,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -223299,7 +223299,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -223387,7 +223387,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -223475,7 +223475,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -224437,7 +224437,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -224540,7 +224540,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -224643,7 +224643,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -224746,7 +224746,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -224849,7 +224849,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -224952,7 +224952,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225055,7 +225055,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225158,7 +225158,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225261,7 +225261,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225364,7 +225364,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225467,7 +225467,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225570,7 +225570,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225673,7 +225673,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225776,7 +225776,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225879,7 +225879,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -225982,7 +225982,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -226085,7 +226085,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -226188,7 +226188,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -226291,7 +226291,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -226394,7 +226394,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -226946,7 +226946,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227049,7 +227049,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227152,7 +227152,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227255,7 +227255,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227358,7 +227358,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227461,7 +227461,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227564,7 +227564,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227667,7 +227667,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227770,7 +227770,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227873,7 +227873,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -227976,7 +227976,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228079,7 +228079,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228182,7 +228182,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228285,7 +228285,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228388,7 +228388,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228491,7 +228491,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228594,7 +228594,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228697,7 +228697,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228800,7 +228800,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -228903,7 +228903,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   thumbnail="placeholder255x255.png"
                 >
                   <div