improvement(settings): right-align timezone picker, order by popularity, drop tooltip

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx

@@ -27,7 +27,7 @@ import { ANONYMOUS_USER_ID } from '@/lib/auth/constants'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { isHosted } from '@/lib/core/config/feature-flags'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
-import { getBrowserTimezone, getSupportedTimezones } from '@/lib/core/utils/timezone'
+import { getBrowserTimezone, getTimezonesByPopularity } from '@/lib/core/utils/timezone'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload'
@@ -42,8 +42,11 @@ import { clearUserData } from '@/stores'
 
 const logger = createLogger('General')
 
-/** IANA zones for the timezone picker; labels drop underscores so search reads naturally. */
-const TIMEZONE_OPTIONS = getSupportedTimezones().map((tz) => ({
+/**
+ * IANA zones for the timezone picker, ordered most-popular first; labels drop
+ * underscores so search reads naturally.
+ */
+const TIMEZONE_OPTIONS = getTimezonesByPopularity().map((tz) => ({
   label: tz.replace(/_/g, ' '),
   value: tz,
 }))
@@ -419,28 +422,19 @@ export function General() {
               </div>
 
               <div className='flex items-center justify-between gap-4'>
-                <div className='flex items-center gap-1.5'>
-                  <Label>Timezone</Label>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Info className='size-[14px] cursor-default text-[var(--text-muted)]' />
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='bottom' align='start'>
-                      <p>The timezone scheduled tasks run in. Defaults to this device's zone.</p>
-                    </Tooltip.Content>
-                  </Tooltip.Root>
+                <Label>Timezone</Label>
+                <div className='w-[260px] flex-shrink-0'>
+                  <ChipCombobox
+                    align='start'
+                    dropdownWidth={260}
+                    searchable
+                    searchPlaceholder='Search timezones'
+                    value={settings?.timezone ?? getBrowserTimezone()}
+                    onChange={handleTimezoneChange}
+                    placeholder='Select timezone'
+                    options={TIMEZONE_OPTIONS}
+                  />
                 </div>
-                <ChipCombobox
-                  className='min-w-0 max-w-[260px]'
-                  align='start'
-                  dropdownWidth={260}
-                  searchable
-                  searchPlaceholder='Search timezones'
-                  value={settings?.timezone ?? getBrowserTimezone()}
-                  onChange={handleTimezoneChange}
-                  placeholder='Select timezone'
-                  options={TIMEZONE_OPTIONS}
-                />
               </div>
 
               <div className='flex items-center justify-between'>

apps/sim/lib/core/utils/timezone.ts

@@ -1,6 +1,8 @@
 /**
- * A curated fallback for runtimes without `Intl.supportedValuesOf` (e.g. Safari
- * < 15.4), so the timezone picker is never an empty dead-end.
+ * The most-used zones, ranked by popularity. Doubles as the popularity prefix
+ * for {@link getTimezonesByPopularity} and as a curated fallback for runtimes
+ * without `Intl.supportedValuesOf` (e.g. Safari < 15.4), so the timezone picker
+ * is never an empty dead-end.
  */
 const COMMON_TIMEZONES = [
   'UTC',
@@ -38,6 +40,21 @@ export function getSupportedTimezones(): string[] {
   return zones.includes('UTC') ? zones : ['UTC', ...zones]
 }
 
+/**
+ * Supported timezones ordered by popularity: the most-used zones
+ * ({@link COMMON_TIMEZONES}) first, in ranked order, followed by every
+ * remaining zone alphabetically. For the picker, where the zones people
+ * actually pick should surface above the long alphabetical tail.
+ */
+export function getTimezonesByPopularity(): string[] {
+  const supported = getSupportedTimezones()
+  const supportedSet = new Set(supported)
+  const popular = COMMON_TIMEZONES.filter((tz) => supportedSet.has(tz))
+  const popularSet = new Set(popular)
+  const rest = supported.filter((tz) => !popularSet.has(tz)).sort((a, b) => a.localeCompare(b))
+  return [...popular, ...rest]
+}
+
 /**
  * An instant's wall-clock time in `timeZone` as a naive `yyyy-MM-ddTHH:mm`
  * string. Lets callers reason about a user's local date/time without UTC — e.g.