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 (
+
+ );
+ }
return (
-
- {visibleLabels.map((label) => (
-
- ))}
- {overflowLabels.length > 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}
/>
))}
- handleOpenChange(true)}
- />
+ {overflowLabels.length > 0 && (
+ handleOpenChange(true)}
+ />
+ )}
);