From ab2b76f50e5a3ba9828715ee557fb4ec8cc3ff44 Mon Sep 17 00:00:00 2001
From: Vamsi krishna <matalav55@gmail.com>
Date: Fri, 24 Jan 2025 12:56:28 +0530
Subject: [PATCH] fix: handled label overflow in modules

---
 .../components/core/sidebar/single-progress-stats.tsx     | 4 ++--
 .../modules/analytics-sidebar/progress-stats.tsx          | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/core/components/core/sidebar/single-progress-stats.tsx b/web/core/components/core/sidebar/single-progress-stats.tsx
index 25f976d8413..047d8bc04dd 100644
--- a/web/core/components/core/sidebar/single-progress-stats.tsx
+++ b/web/core/components/core/sidebar/single-progress-stats.tsx
@@ -21,8 +21,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
     } ${selected ? "bg-custom-background-90" : ""}`}
     onClick={onClick}
   >
-    <div className="w-1/2">{title}</div>
-    <div className="flex w-1/2 items-center justify-end gap-1 px-2">
+    <div className="w-4/6">{title}</div>
+    <div className="flex w-2/6 items-center justify-end gap-1 px-2">
       <div className="flex h-5 items-center justify-center gap-1">
         <span className="w-8 text-right">
           {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
diff --git a/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/web/core/components/modules/analytics-sidebar/progress-stats.tsx
index 3fc7849a4ad..34145424748 100644
--- a/web/core/components/modules/analytics-sidebar/progress-stats.tsx
+++ b/web/core/components/modules/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">
-                    <span
-                      className="block h-3 w-3 rounded-full"
+                  <div className="flex items-center gap-2 truncate">
+                    <div
+                      className="h-3 w-3 rounded-full flex-shrink-0"
                       style={{
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs">{label.title ?? "No labels"}</span>
+                    <p className="text-xs text-ellipsis truncate">{label.title ?? "No labels"}</p>
                   </div>
                 }
                 completed={label.completed}