From f95a6e1d997819f9f23ba56d329d82796cabbc7c Mon Sep 17 00:00:00 2001
From: Vamsi krishna <matalav55@gmail.com>
Date: Fri, 31 Jan 2025 12:49:11 +0530
Subject: [PATCH] fix: cycle labels overflow issue

---
 web/core/components/cycles/active-cycle/cycle-stats.tsx     | 6 +++---
 .../components/cycles/analytics-sidebar/progress-stats.tsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/core/components/cycles/active-cycle/cycle-stats.tsx b/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 44d7b595f48..8c0ec14a310 100644
--- a/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -315,14 +315,14 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                   <SingleProgressStats
                     key={label.label_id ?? `no-label-${index}`}
                     title={
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 truncate">
                         <span
-                          className="block h-3 w-3 rounded-full"
+                          className="block h-3 w-3 rounded-full flex-shrink-0"
                           style={{
                             backgroundColor: label.color ?? "#000000",
                           }}
                         />
-                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                        <span className="text-xs text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
                       </div>
                     }
                     completed={label.completed_issues}
diff --git a/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
index 069ccb2fff5..63203ffdec4 100644
--- a/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
+++ b/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -135,14 +135,14 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
               <SingleProgressStats
                 key={label.id}
                 title={
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 truncate">
                     <span
-                      className="block h-3 w-3 rounded-full"
+                      className="block h-3 w-3 rounded-full flex-shrink-0"
                       style={{
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs">{label.title ?? "No labels"}</span>
+                    <span className="text-xs text-ellipsis truncate">{label.title ?? "No labels"}</span>
                   </div>
                 }
                 completed={label.completed}