From e2441ce2841221fc38cc58d7e0dc937720bfb0cc Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 26 May 2026 23:59:49 -0700
Subject: [PATCH] adjust label overflow

---
 src/components/LabelColumnFilterButton.tsx | 38 +++++++++-------------
 src/components/TableLabelsCell.tsx         | 23 +++++++++----
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/LabelColumnFilterButton.tsx b/src/components/LabelColumnFilterButton.tsx
index 3dc028b31..da35707d8 100644
--- a/src/components/LabelColumnFilterButton.tsx
+++ b/src/components/LabelColumnFilterButton.tsx
@@ -26,8 +26,6 @@ import { LabelBadge } from "./label-badge";
 import { LabelOverflowBadge } from "./label-overflow-badge";
 import { LABEL_COLORS } from "./labels-selector";
 
-const MAX_VISIBLE_SUMMARY_LABELS = 3;
-
 function areSelectionsEqual(a: string[], b: string[]) {
     if (a.length !== b.length) {
         return false;
@@ -85,28 +83,24 @@ export function LabelColumnFilterButton({
             return null;
         }
 
-        const visibleLabels = selectedLabels.slice(0, MAX_VISIBLE_SUMMARY_LABELS);
-        const overflowLabels = selectedLabels.slice(MAX_VISIBLE_SUMMARY_LABELS);
+        if (selectedLabels.length === 1) {
+            const label = selectedLabels[0];
+            return (
+                <LabelBadge
+                    displayOnly
+                    name={label.name}
+                    color={label.color}
+                    className="shrink-0"
+                />
+            );
+        }
 
         return (
-            <div className="flex min-w-0 flex-nowrap items-center gap-1">
-                {visibleLabels.map((label) => (
-                    <LabelBadge
-                        key={label.name}
-                        displayOnly
-                        name={label.name}
-                        color={label.color}
-                        className="shrink-0"
-                    />
-                ))}
-                {overflowLabels.length > 0 && (
-                    <LabelOverflowBadge
-                        labels={overflowLabels}
-                        displayOnly
-                        className="shrink-0"
-                    />
-                )}
-            </div>
+            <LabelOverflowBadge
+                labels={selectedLabels}
+                displayOnly
+                className="shrink-0"
+            />
         );
     }, [selectedLabels]);
 
diff --git a/src/components/TableLabelsCell.tsx b/src/components/TableLabelsCell.tsx
index 5ce445999..77a9538ba 100644
--- a/src/components/TableLabelsCell.tsx
+++ b/src/components/TableLabelsCell.tsx
@@ -16,7 +16,8 @@ import {
     PopoverTrigger
 } from "./ui/popover";
 
-const MAX_VISIBLE_LABELS = 3;
+const MAX_VISIBLE_LABELS = 4;
+const MAX_VISIBLE_BEFORE_OVERFLOW = MAX_VISIBLE_LABELS - 1;
 
 type TableLabelsCellProps = {
     orgId: string;
@@ -36,8 +37,14 @@ export function TableLabelsCell({
         getBoundingClientRect: () => new DOMRect()
     });
 
-    const visibleLabels = localLabels.slice(0, MAX_VISIBLE_LABELS);
-    const overflowLabels = localLabels.slice(MAX_VISIBLE_LABELS);
+    const hasOverflow = localLabels.length > MAX_VISIBLE_LABELS;
+    const visibleLabels = localLabels.slice(
+        0,
+        hasOverflow ? MAX_VISIBLE_BEFORE_OVERFLOW : MAX_VISIBLE_LABELS
+    );
+    const overflowLabels = hasOverflow
+        ? localLabels.slice(MAX_VISIBLE_BEFORE_OVERFLOW)
+        : [];
 
     function handleOpenChange(open: boolean) {
         if (open && triggerRef.current) {
@@ -88,10 +95,12 @@ export function TableLabelsCell({
                         {...label}
                     />
                 ))}
-                <LabelOverflowBadge
-                    labels={overflowLabels}
-                    onClick={() => handleOpenChange(true)}
-                />
+                {overflowLabels.length > 0 && (
+                    <LabelOverflowBadge
+                        labels={overflowLabels}
+                        onClick={() => handleOpenChange(true)}
+                    />
+                )}
             </div>
         </div>
     );