fix: misaligned and undersized tick mark in timezone dropdown (#21550)

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

@@ -140,7 +140,7 @@ export function TimezoneSelectComponent({
           ),
         option: (state) =>
           classNames(
-            "bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-md text-default ",
+            "bg-default py-2.5 px-3 rounded-md text-default ",
             state.isFocused && "bg-subtle",
             state.isDisabled && "bg-muted",
             state.isSelected && "bg-emphasis text-default",

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

@@ -45,8 +45,8 @@ export const OptionComponent = <
   return (
     // This gets styled in the select classNames prop now - handles overrides with styles vs className here doesn't
     <reactSelectComponents.Option {...props}>
-      <div className="flex">
-        <span className="mr-auto" data-testid={`select-option-${(props as unknown as ExtendedOption).value}`}>
+      <div className="flex items-center justify-between">
+        <span className="w-full" data-testid={`select-option-${(props as unknown as ExtendedOption).value}`}>
           {props.label || <>&nbsp;</>}
         </span>
         {(props.data as unknown as ExtendedOption).needsTeamsUpgrade ? (