fix: handled label overflow in modules (#6451)

Author: vamsikrishnamathala

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)}%

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}