feat: limit badges to 2 with hover/click popover in UserListTable

[eunjae-lee]

What does this PR do?

Limits the number of badges displayed in the "teams" column and attribute columns in the UserListTable to a maximum of 2. When there are more than 2 badges, only the first 2 are shown with a "+N" badge that opens a popover to display all hidden items.

Changes

New Component: LimitedBadges

Created a reusable LimitedBadges component in apps/web/components/ui/LimitedBadges.tsx that:

• Accepts an array of BadgeItem objects (label, variant, onClick)
• Shows up to maxVisible badges (default: 2) with a "+N" indicator for overflow
• Opens a popover on hover for desktop and click for mobile (uses useMediaQuery to detect device type)
• Uses useMemo and useCallback for performance optimization
• Uses array index as the React key (simplified API - no id field required)

UserListTable Updates

• Teams column now uses LimitedBadges to limit displayed team badges
• Attribute columns now use LimitedBadges with a simplified label format showing value, weight percentage, and group indicator (e.g., "Value 100% (group)")
• Added explicit TypeScript types to callback parameters for Biome lint compliance
• Converted ternary operators to if-else statements for Biome noTernary compliance
• The "pending" status badge is rendered separately and not counted toward the limit

ResponseValueCell Updates

• Refactored to use the shared LimitedBadges component instead of inline badge rendering
• Removed rowId parameter (no longer needed since array index is used as key)

Demo

Updates since last revision

• Removed id field from BadgeItem type - component now uses array index as the React key for simplicity
• Removed unused rowId parameter from ResponseValueCell component
• Fixed Biome lint warnings by converting ternary operators to if-else statements
• Fixed import ordering issues

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• N/A - I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - no documentation changes needed.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Navigate to the organization members page (Settings > Organizations > Members)
2. Find users that belong to more than 2 teams
3. Verify only 2 team badges are shown with a "+N" badge for remaining teams
4. On desktop: Hover over the "+N" badge to see the popover appear, move mouse away to close
5. On mobile (or with touch simulation): Tap the "+N" badge to toggle the popover
6. For attribute columns, verify the same behavior applies when a user has more than 2 attribute values
7. Verify the popover stays open when moving mouse from the trigger to the popover content

Human Review Checklist

• Verify hover opens/closes the popover correctly on desktop
• Verify click/tap opens/closes the popover on mobile devices
• Test edge cases: 0, 1, 2, and 3+ badges
• Confirm popover stays open when hovering over its content (not just the trigger)
• Verify using array index as key: Confirm no rendering issues when badge lists change
• Verify attribute column rendering: Weight and group indicator now appear in a single label format (e.g., "Value 100% (group)") instead of separate badges - confirm this looks acceptable
• Verify the existing ResponseValueCell in insights module still works correctly (rowId parameter was removed)

Checklist

• My code follows the style guidelines of this project
• I have checked if my changes generate no new warnings

---

Link to Devin run

https://app.devin.ai/sessions/f4de6199ef3841b884221abf6e69a62a

Requested by

@eunjae-lee (eunjae@cal.com)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

4 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
api-v2	Ignored	Preview	Jan 11, 2026 0:10am
cal	Ignored		Jan 11, 2026 0:10am
cal-companion	Ignored	Preview	Jan 11, 2026 0:10am
cal-eu	Ignored		Jan 11, 2026 0:10am

[eunjae-lee]

@cubic-dev-ai review this

[cubic-dev-ai]

@cubic-dev-ai review this

@eunjae-lee I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

2 issues found across 3 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/insights/components/ResponseValueCell.tsx">

<violation number="1" location="apps/web/modules/insights/components/ResponseValueCell.tsx:20">
P2: Potential duplicate React keys if `values` array contains duplicate entries. The original code used the array index `i` in the key to ensure uniqueness (`${cellId}-${i}-${rowId}`), but the new code only uses `${id}-${rowId}`. Include the index to preserve the original uniqueness guarantee.</violation>
</file>

<file name="apps/web/modules/users/components/UserTable/UserListTable.tsx">

<violation number="1" location="apps/web/modules/users/components/UserTable/UserListTable.tsx:263">
P2: Regression: Group option badges lose their distinctive orange styling. The original code used `variant={isAGroupOption ? "orange" : "gray"}` to visually distinguish group options, but this is now hardcoded to `"gray"`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

2 issues found across 4 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/components/ui/LimitedBadges.tsx">

<violation number="1" location="apps/web/components/ui/LimitedBadges.tsx:69">
P2: Using `index` as key instead of `label`. The PR description states the component uses `label` as React key, but the implementation uses `index`. Consider using `item.label` as key to match the documented behavior and avoid potential reconciliation issues when items change.</violation>

<violation number="2" location="apps/web/components/ui/LimitedBadges.tsx:94">
P2: Using `index` as key for hidden items. Consider using `item.label` as key for consistency with the documented behavior.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Using index as key for hidden items. Consider using item.label as key for consistency with the documented behavior.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/components/ui/LimitedBadges.tsx, line 94:

<comment>Using `index` as key for hidden items. Consider using `item.label` as key for consistency with the documented behavior.</comment>

<file context>
@@ -0,0 +1,109 @@
+            <div className="flex flex-col gap-1">
+              {hiddenItems.map((item, index) => (
+                <span
+                  key={index}
+                  className="text-default cursor-pointer text-sm hover:text-emphasis"
+                  onClick={item.onClick}>
</file context>

Suggested change

	key={index}
	key={item.label}

✅ Addressed in 5fc74cf

[cubic-dev-ai]

P2: Using index as key instead of label. The PR description states the component uses label as React key, but the implementation uses index. Consider using item.label as key to match the documented behavior and avoid potential reconciliation issues when items change.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/components/ui/LimitedBadges.tsx, line 69:

<comment>Using `index` as key instead of `label`. The PR description states the component uses `label` as React key, but the implementation uses `index`. Consider using `item.label` as key to match the documented behavior and avoid potential reconciliation issues when items change.</comment>

<file context>
@@ -0,0 +1,109 @@
+  return (
+    <div className={`flex flex-wrap items-center gap-x-1 gap-y-1 ${className || ""}`}>
+      {visibleItems.map((item, index) => (
+        <Badge key={index} variant={item.variant || "gray"} onClick={item.onClick}>
+          {item.label}
+        </Badge>
</file context>

Suggested change

	<Badge key={index} variant={item.variant || "gray"} onClick={item.onClick}>
	<Badge key={item.label} variant={item.variant || "gray"} onClick={item.onClick}>

✅ Addressed in 5fc74cf

[Udit-takkar]

+1

[Udit-takkar]

Looks good.

Just some minor suggestion https://github.com/calcom/cal.com/pull/26556/changes#r2673095671

[cubic-dev-ai]

2 issues found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/components/ui/LimitedBadges.tsx">

<violation number="1" location="apps/web/components/ui/LimitedBadges.tsx:69">
P2: Using `item.label` as React key can cause duplicate key issues if multiple badges share the same label (e.g., two teams with the same name or attribute values with identical labels). Consider using a combination of label and index to ensure uniqueness.</violation>

<violation number="2" location="apps/web/components/ui/LimitedBadges.tsx:94">
P2: Using `item.label` as React key for hidden items has the same duplicate key issue as the visible badges. Consider using `${item.label}-${index}` to ensure uniqueness while maintaining label-based stability.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Using item.label as React key for hidden items has the same duplicate key issue as the visible badges. Consider using ${item.label}-${index} to ensure uniqueness while maintaining label-based stability.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/components/ui/LimitedBadges.tsx, line 94:

<comment>Using `item.label` as React key for hidden items has the same duplicate key issue as the visible badges. Consider using `${item.label}-${index}` to ensure uniqueness while maintaining label-based stability.</comment>

<file context>
@@ -89,9 +89,9 @@ function LimitedBadges({
+              {hiddenItems.map((item) => (
                 <span
-                  key={index}
+                  key={item.label}
                   className="text-default cursor-pointer text-sm hover:text-emphasis"
                   onClick={item.onClick}>
</file context>

Suggested change

	key={item.label}
	className="text-default cursor-pointer text-sm hover:text-emphasis"
	onClick={item.onClick}>
	{hiddenItems.map((item, index) => (
	<span
	key={`${item.label}-${index}`}

[cubic-dev-ai]

P2: Using item.label as React key can cause duplicate key issues if multiple badges share the same label (e.g., two teams with the same name or attribute values with identical labels). Consider using a combination of label and index to ensure uniqueness.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/components/ui/LimitedBadges.tsx, line 69:

<comment>Using `item.label` as React key can cause duplicate key issues if multiple badges share the same label (e.g., two teams with the same name or attribute values with identical labels). Consider using a combination of label and index to ensure uniqueness.</comment>

<file context>
@@ -65,8 +65,8 @@ function LimitedBadges({
-      {visibleItems.map((item, index) => (
-        <Badge key={index} variant={item.variant || "gray"} onClick={item.onClick}>
+      {visibleItems.map((item) => (
+        <Badge key={item.label} variant={item.variant || "gray"} onClick={item.onClick}>
           {item.label}
         </Badge>
</file context>

[github-actions]

E2E results are ready!

• Workflow #97856.2 latest results