Skip to content

Commit eaca490

Browse files
authored
fix(ui): remove css transition on popover and dropdown items to avoid flicker (#2563)
1 parent 2d26c0c commit eaca490

File tree

2 files changed

+4
-5
lines changed

2 files changed

+4
-5
lines changed

apps/sim/components/emcn/components/popover/popover.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,9 @@ import { cn } from '@/lib/core/utils/cn'
5757
/**
5858
* Shared base styles for all popover interactive items.
5959
* Ensures consistent height and styling across items, folders, and back button.
60-
* Uses fast transitions (duration-75) to prevent hover state "jumping" during rapid mouse movement.
6160
*/
6261
const POPOVER_ITEM_BASE_CLASSES =
63-
'flex h-[25px] min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-base text-[var(--text-primary)] text-[12px] transition-colors duration-75 dark:text-[var(--text-primary)] [&_svg]:transition-colors [&_svg]:duration-75'
62+
'flex h-[25px] min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-base text-[var(--text-primary)] text-[12px] dark:text-[var(--text-primary)]'
6463

6564
/**
6665
* Variant-specific active state styles for popover items.

apps/sim/components/ui/dropdown-menu.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
8282
<DropdownMenuPrimitive.Item
8383
ref={ref}
8484
className={cn(
85-
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
85+
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
8686
inset && 'pl-8',
8787
className
8888
)}
@@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
9898
<DropdownMenuPrimitive.CheckboxItem
9999
ref={ref}
100100
className={cn(
101-
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
101+
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
102102
className
103103
)}
104104
checked={checked}
@@ -121,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
121121
<DropdownMenuPrimitive.RadioItem
122122
ref={ref}
123123
className={cn(
124-
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
124+
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
125125
className
126126
)}
127127
{...props}

0 commit comments

Comments
 (0)