fix(ui): the dropdown menu has double hover causing a weird bug in the destructive actions on hover.

[KartikLabhshetwar]

Issue Summary

Destructive actions in dropdown menus show a double hover effect: both the parent DropdownMenuItem's subtle gray background and the child DropdownItem's error red background appear on hover. This creates a layered hover state that looks inconsistent and breaks the intended destructive styling.

The root cause is that DropdownMenuItem applies hover:bg-subtle to all items, including those containing destructive DropdownItem children. When hovering over a destructive action, both the parent container's subtle background and the child's error background are visible, creating visual conflict.

Steps to Reproduce

1. Navigate to any page with a dropdown menu containing a destructive action (e.g., Settings → API Keys, Teams → Team Members, or Webhooks list)
2. Open the dropdown menu (click the three-dot menu icon)
3. Hover over a destructive action item (e.g., "Delete" with trash icon)
4. Observe the hover state

Actual Results

Expected Results

Technical details

• Component: packages/ui/components/dropdown/Dropdown.tsx
• Issue: DropdownMenuItem applies hover:bg-subtle unconditionally, conflicting with destructive DropdownItem's hover:bg-error
• Solution: Detect destructive children in DropdownMenuItem and conditionally apply transparent hover background for destructive items, while maintaining subtle hover for non-destructive items

Testing:

• Tested in multiple dropdown menus with destructive actions:
  • API Keys list (Settings → Developer → API Keys)
  • Team member actions (Teams → Team Members)
  • Webhook actions (Settings → Developer → Webhooks)
  • Booking actions
  • Event type actions
• Verified non-destructive items still show subtle hover background
• Confirmed rounded corners and border radius are preserved
• Tested in both light and dark modes

[linear]

CAL-6985

[samar-703]

I regenerated the above issue, and I don't see any issue with this. The destructive dropdown with a delete button looks like the expected result, which is mentioned above. Looks good to me, though.

[KartikLabhshetwar]

I regenerated the above issue, and I don't see any issue with this. The destructive dropdown with a delete button looks like the expected result, which is mentioned above. Looks good to me, though.

Please once check on the routing page, the team page and the calender integration page all of them are showing this issue.