From 31ebecba528d772a61d1fc4c36bcb76a797817e8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sun, 25 Feb 2024 22:36:33 +0530
Subject: [PATCH] fix: issue sidebar label overflow (#3788)

---
 web/components/issues/issue-detail/label/label-list-item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/issues/issue-detail/label/label-list-item.tsx b/web/components/issues/issue-detail/label/label-list-item.tsx
index 3c3164c5a..60792b01c 100644
--- a/web/components/issues/issue-detail/label/label-list-item.tsx
+++ b/web/components/issues/issue-detail/label/label-list-item.tsx
@@ -35,7 +35,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
   return (
     <div
       key={labelId}
-      className={`transition-all relative flex items-center gap-1  border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
+      className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
         !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
       } `}
       onClick={handleLabel}
@@ -46,7 +46,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
           backgroundColor: label.color ?? "#000000",
         }}
       />
-      <div className="flex-shrink-0">{label.name}</div>
+      <div className="truncate">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">
           <X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />