From e803c1980e08b1d649f5ceb70a94108d38c64dd4 Mon Sep 17 00:00:00 2001
From: Patryk Andrzejewski <vox3r69@gmail.com>
Date: Thu, 8 Dec 2022 13:08:35 +0100
Subject: [PATCH] Fix overlapping cells in product list view (#2657)

* Fix breaking words on table cells

* Update snapshots
---
 .../components/ProductList/ProductList.tsx        | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index a94eaf367..bc24a8276 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/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 ? (