diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts b/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts index 7e17355e..bca34a1c 100644 --- a/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts +++ b/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts @@ -25,8 +25,6 @@ export const userSelectTheme = tv({ 'mt-12', 'z-20', 'absolute', - 'px-1', - 'py-1', 'flex-col', 'gap-0.5', 'min-w-full', @@ -39,6 +37,7 @@ export const userSelectTheme = tv({ 'border-gray-200', 'rounded-xl', ], + popoverItemWrapper: ['flex', 'flex-col', 'px-2', 'py-2', 'gap-1'], }, variants: { isOpen: { diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx index 07866570..f68214cd 100644 --- a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx +++ b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx @@ -10,6 +10,7 @@ import { BuildingIcon, ChevronUpDown, SettingsSlidersIcon, + SquigglyLine, } from 'components/shared/CustomIcon'; import { cn } from 'utils/classnames'; import { UserSelectTheme, userSelectTheme } from './UserSelect.theme'; @@ -143,48 +144,66 @@ export const UserSelect = ({ options, value }: UserSelectProps) => { {...getMenuProps({ ref: popoverRef }, { suppressRefError: true })} id="popover" ref={popoverRef} - className={cn( - theme.popover({ isOpen }), - { - // Position the popover based on the dropdown position - 'top-[27.5%]': dropdownPosition === 'bottom', - 'bottom-[92.5%]': dropdownPosition === 'top', - }, - 'px-2 py-2', - )} + className={cn(theme.popover({ isOpen }), { + // Position the popover based on the dropdown position + 'top-[27.5%]': dropdownPosition === 'bottom', + 'bottom-[92.5%]': dropdownPosition === 'top', + })} > - {/* Settings header */} -
Other teams
-Manage
-Other teams
+Manage
+