From 1c44e43c437ebc6dba1dab92a710c08ccf2594bd Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 18 Oct 2022 04:29:18 +0530
Subject: [PATCH] fix: Fix overflow issue for category name in article list
 (#5658)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../helpcenter/components/ArticleItem.vue          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index b602baaa8..254302074 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -4,7 +4,7 @@
       <div class="article-content-wrap">
         <div class="article-block">
           <router-link :to="articleUrl(id)">
-            <h6 class="sub-block-title text-truncate">
+            <h6 :title="title" class="sub-block-title text-truncate">
               {{ title }}
             </h6>
           </router-link>
@@ -20,7 +20,12 @@
         class="fs-small button clear link secondary"
         :to="getCategoryRoute(category.slug)"
       >
-        {{ category.name }}
+        <span
+          :title="category.name"
+          class="category-link-content text-ellipsis"
+        >
+          {{ category.name }}
+        </span>
       </router-link>
     </td>
     <td>
@@ -155,4 +160,9 @@ td {
     }
   }
 }
+
+.category-link-content {
+  max-width: 16rem;
+  line-height: 1.5;
+}
 </style>