adjust label overflow

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);
+        if (selectedLabels.length === 1) {
-        const overflowLabels = selectedLabels.slice(MAX_VISIBLE_SUMMARY_LABELS);
+            const label = selectedLabels[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 && (
+        }
+
+        return (
             <LabelOverflowBadge
-                        labels={overflowLabels}
+                labels={selectedLabels}
                 displayOnly
                 className="shrink-0"
             />
-                )}
-            </div>
         );
     }, [selectedLabels]);
 

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 hasOverflow = localLabels.length > MAX_VISIBLE_LABELS;
-    const overflowLabels = localLabels.slice(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}
                     />
                 ))}
+                {overflowLabels.length > 0 && (
                     <LabelOverflowBadge
                         labels={overflowLabels}
                         onClick={() => handleOpenChange(true)}
                     />
+                )}
             </div>
         </div>
     );