From 046e6e5533b12841cb2bf6acdf67fabbdaefae22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Mon, 30 Sep 2024 09:57:24 +0200
Subject: [PATCH] fix(dashboard): product table colum widths (#9329)

**What**
- set product title and sales channels column widths to a reasonable value so the scroll is visible on mobile resolutions only

---

FIXES CC-527
---
 .../table-cells/product/product-cell/product-cell.tsx     | 6 ++++--
 .../product/sales-channels-cell/sales-channels-cell.tsx   | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/admin/dashboard/src/components/table/table-cells/product/product-cell/product-cell.tsx b/packages/admin/dashboard/src/components/table/table-cells/product/product-cell/product-cell.tsx
index f4ce38e6c5..13a5c086b0 100644
--- a/packages/admin/dashboard/src/components/table/table-cells/product/product-cell/product-cell.tsx
+++ b/packages/admin/dashboard/src/components/table/table-cells/product/product-cell/product-cell.tsx
@@ -9,11 +9,13 @@ type ProductCellProps = {
 
 export const ProductCell = ({ product }: ProductCellProps) => {
   return (
-    <div className="flex h-full w-full items-center gap-x-3 overflow-hidden">
+    <div className="flex h-full w-full items-center gap-x-3 overflow-hidden max-w-[250px]">
       <div className="w-fit flex-shrink-0">
         <Thumbnail src={product.thumbnail} />
       </div>
-      <span className="truncate">{product.title}</span>
+      <span title={product.title} className="truncate">
+        {product.title}
+      </span>
     </div>
   )
 }
diff --git a/packages/admin/dashboard/src/components/table/table-cells/product/sales-channels-cell/sales-channels-cell.tsx b/packages/admin/dashboard/src/components/table/table-cells/product/sales-channels-cell/sales-channels-cell.tsx
index 806decac0c..1af8ee0a3c 100644
--- a/packages/admin/dashboard/src/components/table/table-cells/product/sales-channels-cell/sales-channels-cell.tsx
+++ b/packages/admin/dashboard/src/components/table/table-cells/product/sales-channels-cell/sales-channels-cell.tsx
@@ -45,10 +45,12 @@ export const SalesChannelsCell = ({
     )
   }
 
+  const channels = salesChannels.map((sc) => sc.name).join(", ")
+
   return (
-    <div className="flex h-full w-full items-center overflow-hidden">
-      <span className="truncate">
-        {salesChannels.map((sc) => sc.name).join(", ")}
+    <div className="flex h-full w-full items-center overflow-hidden max-w-[250px]">
+      <span title={channels} className="truncate">
+        {channels}
       </span>
     </div>
   )