Fix overlapping cells in product list view (#2657)

* Fix breaking words on table cells

* Update snapshots

src/products/components/ProductList/ProductList.tsx

@@ -49,7 +49,7 @@ const useStyles = makeStyles(
   theme => ({
     [theme.breakpoints.up("md")]: {
       colName: {
-        minWidth: 250,
+        minWidth: 300,
       },
       colPrice: {
         width: 300,
@@ -58,7 +58,7 @@ const useStyles = makeStyles(
         width: 200,
       },
       colType: {
-        width: 200,
+        width: 300,
       },
       colDate: {
         width: 200,
@@ -75,10 +75,14 @@ const useStyles = makeStyles(
       width: "100%",
     },
     colName: {
+      wordBreak: "break-all",
       "&$colNameFixed": {
-        width: 250,
+        width: 300,
       },
     },
+    colAvatar: {
+      wordBreak: "break-all",
+    },
     colNameFixed: {},
     colNameHeader: {
       marginLeft: AVATAR_MARGIN,
@@ -90,7 +94,9 @@ const useStyles = makeStyles(
       textAlign: "right",
     },
     colPublished: {},
-    colType: {},
+    colType: {
+      wordBreak: "break-all",
+    },
     link: {
       cursor: "pointer",
     },
@@ -348,6 +354,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     />
                   </TableCell>
                   <TableCellAvatar
+                    className={classes.colAvatar}
                     thumbnail={maybe(() => product.thumbnail.url)}
                   >
                     {product?.name ? (