fix: cycle labels overflow issue (#6526)

makeplane · Jan 31, 2025 · 0deec92 · 0deec92
1 parent d2a6307
commit 0deec92
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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}