style: improve dropdown option spacing and hover separation (#25605)

* feat(ui): improve dropdown option spacing and hover separation

* style: add flex column layout and spacing to timezone select scrollbar

packages/features/components/timezone-select/TimezoneSelect.tsx

@@ -205,7 +205,7 @@ export function TimezoneSelectComponent({
         groupHeading: () => "leading-none text-xs uppercase text-default pl-2.5 pt-4 pb-2",
         menuList: (state) =>
           classNames(
-            "scroll-bar scrollbar-track-w-20 rounded-md",
+            "scroll-bar scrollbar-track-w-20 rounded-md flex flex-col space-y-1",
             timezoneClassNames?.menuList && timezoneClassNames.menuList(state)
           ),
         indicatorsContainer: (state) =>

packages/ui/components/form/select/Select.tsx

@@ -60,7 +60,7 @@ export const Select = <
         input: () => cx("text-emphasis", innerClassNames?.input),
         option: (state) =>
           cx(
-            "bg-default flex cursor-pointer justify-between py-1.5 px-2 rounded-md text-default items-center",
+            "bg-default flex cursor-pointer justify-between py-2 px-3 rounded-md text-default items-center",
             state.isFocused && "bg-subtle",
             state.isDisabled && "bg-cal-muted",
             state.isSelected && "bg-emphasis text-default",
@@ -101,7 +101,7 @@ export const Select = <
         groupHeading: () => "leading-none text-xs text-muted p-2 font-medium ml-1",
         menuList: () =>
           cx(
-            "scroll-bar scrollbar-track-w-20 rounded-md flex flex-col stack-y-px",
+            "scroll-bar scrollbar-track-w-20 rounded-md flex flex-col space-y-1",
             innerClassNames?.menuList
           ),
         indicatorsContainer: (state) =>