From 170b3a08b7144bb0b88e112e809992ae54040ea0 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:24:22 +0200
Subject: [PATCH] fix(dashboard): Prevent category names from overflowing in
 organize section (#9562)

**What**
- Prevents the name of parent and children categories from overflowing in the Organize section.

Resolves CC-586
---
 .../category-organize-section.tsx                  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/admin/dashboard/src/routes/categories/category-detail/components/category-organize-section/category-organize-section.tsx b/packages/admin/dashboard/src/routes/categories/category-detail/components/category-organize-section/category-organize-section.tsx
index e278077452..c17f5de9e6 100644
--- a/packages/admin/dashboard/src/routes/categories/category-detail/components/category-organize-section/category-organize-section.tsx
+++ b/packages/admin/dashboard/src/routes/categories/category-detail/components/category-organize-section/category-organize-section.tsx
@@ -98,7 +98,7 @@ const PathDisplay = ({
     return (
       <div className="grid grid-cols-[20px_1fr] items-start gap-x-2">
         <FolderIllustration />
-        <div className="flex items-center gap-x-0.5">
+        <div className="flex w-full items-center gap-x-0.5 overflow-hidden">
           <Tooltip content={t("categories.fields.path.tooltip")}>
             <button
               className="outline-none"
@@ -110,7 +110,9 @@ const PathDisplay = ({
               </Text>
             </button>
           </Tooltip>
-          <TriangleRightMini />
+          <div className="flex size-[15px] shrink-0 items-center justify-center">
+            <TriangleRightMini />
+          </div>
           <Text
             size="xsmall"
             leading="compact"
@@ -201,10 +203,12 @@ const ChildrenDisplay = ({
   }
 
   return (
-    <div className="flex flex-wrap gap-1">
+    <div className="flex w-full flex-wrap gap-1">
       {chips.map((chip) => (
-        <Badge key={chip.id} size="2xsmall" asChild>
-          <Link to={`/categories/${chip.id}`}>{chip.name}</Link>
+        <Badge key={chip.id} size="2xsmall" className="max-w-full" asChild>
+          <Link to={`/categories/${chip.id}`}>
+            <span className="truncate">{chip.name}</span>
+          </Link>
         </Badge>
       ))}
     </div>