From e6f33eb26252b69055c12ffb885e1c6bccbb693d Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Thu, 29 Feb 2024 20:29:02 +0530
Subject: [PATCH] [WEB-609] fix: header text overflow issue in kanban layout
 (#3848)

* fix: kanban header text overflow

* chore: updated condition
---
 .../issues/issue-layouts/kanban/default.tsx        | 11 +++++++++--
 .../issue-layouts/kanban/headers/group-by-card.tsx | 14 +++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 7aac11c6f..3cbab589f 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -101,8 +101,15 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
 
   const groupList = showEmptyGroup ? list : groupWithIssues;
 
-  const visibilityGroupBy = (_list: IGroupByColumn) =>
-    sub_group_by ? false : kanbanFilters?.group_by.includes(_list.id) ? true : false;
+  const visibilityGroupBy = (_list: IGroupByColumn) => {
+    if (sub_group_by) {
+      if (kanbanFilters?.sub_group_by.includes(_list.id)) return true;
+      return false;
+    } else {
+      if (kanbanFilters?.group_by.includes(_list.id)) return true;
+      return false;
+    }
+  };
 
   const isGroupByCreatedBy = group_by === "created_by";
 
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 440b379b8..f49af2922 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -106,13 +106,21 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
           {icon ? icon : <Circle width={14} strokeWidth={2} />}
         </div>
 
-        <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `w-full flex-row`}`}>
+        <div
+          className={`relative overflow-hidden flex items-center gap-1 ${
+            verticalAlignPosition ? `flex-col` : `w-full flex-row`
+          }`}
+        >
           <div
-            className={`line-clamp-1 font-medium text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
+            className={`inline-block truncate line-clamp-1 font-medium text-custom-text-100 overflow-hidden ${
+              verticalAlignPosition ? `vertical-lr max-h-[400px]` : ``
+            }`}
           >
             {title}
           </div>
-          <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+          <div
+            className={`flex-shrink-0 text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}
+          >
             {count || 0}
           </div>
         </div>