[DT-3501] ux updates to timezone popover

src/lib/components/timezone-select.svelte

@@ -16,7 +16,6 @@
   } from '$lib/holocene/menu';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
-  import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
     hourFormat,
@@ -54,6 +53,7 @@
   let intervalId: number | undefined = undefined;
   let currentDate = new Date().setMilliseconds(0);
   let openUnsubscriber: Unsubscriber | undefined;
+  let timezoneListElement: HTMLDivElement;
 
   $: filteredOptions = !search
     ? TimezoneOptions
@@ -67,35 +67,44 @@
       });
 
   const selectTimezone = (value: string) => {
-    if ($relativeTime && value !== BASE_TIME_FORMAT_OPTIONS.LOCAL)
-      $relativeTime = false;
     $timeFormat = value;
     search = '';
-  };
-
-  const handleRelativeToggle = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    if (target.checked && $timeFormat !== BASE_TIME_FORMAT_OPTIONS.LOCAL) {
-      $timeFormat = BASE_TIME_FORMAT_OPTIONS.LOCAL;
-    }
+    $open = false;
   };
 
   const setTimestampFormat = (format: TimestampFormat) => {
     $timestampFormat = format;
+    $relativeTime = false;
   };
 
   const setHourFormat = (format: HourFormat) => {
     $hourFormat = format;
   };
 
   $: timezone = Timezones[$timeFormat ?? '']?.abbr ?? $timeFormat;
+  $: hourFormatDisabled = $timestampFormat === 'iso' || $relativeTime;
+  $: timezoneSelectionDisabled = $relativeTime || $timestampFormat === 'iso';
 
   openUnsubscriber = open.subscribe((isOpen) => {
     if (isOpen) {
       currentDate = new Date().setMilliseconds(0);
       intervalId = window.setInterval(() => {
         currentDate = new Date().setMilliseconds(0);
       }, 1000);
+
+      setTimeout(() => {
+        if (timezoneListElement) {
+          const selectedItem = timezoneListElement.querySelector(
+            '[aria-selected="true"], .selected',
+          );
+          if (selectedItem) {
+            selectedItem.scrollIntoView({
+              block: 'center',
+              behavior: 'instant',
+            });
+          }
+        }
+      }, 0);
     } else {
       window.clearInterval(intervalId);
     }
@@ -130,124 +139,124 @@
   <Menu
     id="timezones-menu"
     {position}
-    class="w-[10rem] sm:w-[20rem] md:w-[28rem]"
+    keepOpen={true}
+    maxHeight="max-h-[26rem]"
+    class="flex w-[10rem] flex-col sm:w-[20rem] md:w-[28rem]"
   >
-    <Input
-      label={translate('common.search')}
-      labelHidden
-      id="timezone-search"
-      noBorder
-      bind:value={search}
-      icon="search"
-      placeholder={translate('common.search')}
-    />
-
-    <MenuDivider />
-
-    <div class="m-4">
-      <ToggleSwitch
-        label={translate('common.relative')}
-        id="relative-toggle"
-        bind:checked={$relativeTime}
-        labelPosition="left"
-        on:change={handleRelativeToggle}
-        data-testid="timezones-relative-toggle"
+    <div class="mx-4 mb-2 mt-4 flex-shrink-0">
+      <p class="font-medium">Timestamp Format</p>
+      <Timestamp
+        as="p"
+        class="mb-4 text-sm text-secondary"
+        dateTime={currentDate}
       />
-    </div>
-
-    {#if !$relativeTime}
       <div
-        class="mx-4 mb-2 mt-4 flex gap-2 max-md:flex-col md:flex-row md:items-center md:justify-between"
+        class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between"
       >
-        <p class="font-medium">Timestamp Format</p>
         <ToggleButtons>
           <ToggleButton
             size="xs"
-            active={$timestampFormat === 'short'}
+            active={$relativeTime}
+            on:click={() => ($relativeTime = true)}
+            data-testid="timezones-relative-toggle"
+          >
+            Relative
+          </ToggleButton>
+          <ToggleButton
+            size="xs"
+            active={!$relativeTime && $timestampFormat === 'short'}
             on:click={() => setTimestampFormat('short')}>Short</ToggleButton
           >
           <ToggleButton
             size="xs"
-            active={$timestampFormat === 'medium'}
+            active={!$relativeTime && $timestampFormat === 'medium'}
             on:click={() => setTimestampFormat('medium')}>Default</ToggleButton
           >
           <ToggleButton
             size="xs"
-            active={$timestampFormat === 'long'}
+            active={!$relativeTime && $timestampFormat === 'long'}
             on:click={() => setTimestampFormat('long')}>Long</ToggleButton
           >
           <ToggleButton
             size="xs"
-            active={$timestampFormat === 'iso'}
+            active={!$relativeTime && $timestampFormat === 'iso'}
             on:click={() => setTimestampFormat('iso')}>ISO</ToggleButton
           >
         </ToggleButtons>
-      </div>
 
-      <div
-        class="mx-4 mb-2 flex gap-2 max-md:flex-col md:flex-row md:items-center md:justify-between"
-      >
-        <p class="font-medium">Hour Format</p>
         <ToggleButtons>
           <ToggleButton
             size="xs"
             active={$hourFormat === 'system'}
-            disabled={$timestampFormat === 'iso'}
-            on:click={() => setHourFormat('system')}>System</ToggleButton
+            disabled={hourFormatDisabled}
+            on:click={() => setHourFormat('system')}
           >
+            System
+          </ToggleButton>
           <ToggleButton
             size="xs"
             active={$hourFormat === '12'}
-            disabled={$timestampFormat === 'iso'}
-            on:click={() => setHourFormat('12')}>12-hour</ToggleButton
+            disabled={hourFormatDisabled}
+            on:click={() => setHourFormat('12')}>12h</ToggleButton
           >
           <ToggleButton
             size="xs"
             active={$hourFormat === '24'}
-            disabled={$timestampFormat === 'iso'}
-            on:click={() => setHourFormat('24')}>24-hour</ToggleButton
+            disabled={hourFormatDisabled}
+            on:click={() => setHourFormat('24')}>24h</ToggleButton
           >
         </ToggleButtons>
       </div>
+    </div>
 
-      <div class="mx-4 mb-4 mt-3">
-        <Timestamp
-          as="p"
-          class="text-xs text-secondary"
-          dateTime={currentDate}
-        />
-      </div>
-    {/if}
+    <div class="mx-4 mt-1 flex-shrink-0">
+      <p class="mb-1 font-medium">Timezone</p>
+    </div>
+
+    <div class="flex-shrink-0 px-4">
+      <Input
+        label={translate('common.search')}
+        labelHidden
+        id="timezone-search"
+        noBorder
+        bind:value={search}
+        icon="search"
+        placeholder={translate('common.search')}
+        disabled={timezoneSelectionDisabled}
+      />
+    </div>
 
     <MenuDivider />
 
-    {#if !search}
-      {#each QuickTimezoneOptions as { value, label }}
+    <div class="max-h-[18rem] overflow-y-auto" bind:this={timezoneListElement}>
+      {#if !search}
+        {#each QuickTimezoneOptions as { value, label }}
+          <MenuItem
+            onclick={() => selectTimezone(value)}
+            data-testid="timezones-{value}"
+            selected={value === $timeFormat}
+            disabled={timezoneSelectionDisabled}
+            description={value === BASE_TIME_FORMAT_OPTIONS.LOCAL
+              ? localTime
+              : undefined}
+          >
+            {label}
+          </MenuItem>
+        {/each}
+      {/if}
+
+      {#each filteredOptions as { value, label, offset, abbr }}
         <MenuItem
-          onclick={() => selectTimezone(value)}
-          data-testid="timezones-{value}"
           selected={value === $timeFormat}
-          description={value === BASE_TIME_FORMAT_OPTIONS.LOCAL
-            ? localTime
-            : undefined}
+          onclick={() => selectTimezone(value)}
+          disabled={timezoneSelectionDisabled}
+          description={formatUTCOffset(offset, translate('common.utc'))}
         >
-          {label}
+          {label} ({abbr})
         </MenuItem>
+      {:else}
+        <MenuItem disabled>{translate('common.no-results')}</MenuItem>
       {/each}
-
-      <MenuDivider />
-    {/if}
-
-    {#each filteredOptions as { value, label, offset, abbr }}
-      <MenuItem
-        selected={value === $timeFormat}
-        onclick={() => selectTimezone(value)}
-        description={formatUTCOffset(offset, translate('common.utc'))}
-      >
-        {label} ({abbr})
-      </MenuItem>
-    {:else}
-      <MenuItem disabled>{translate('common.no-results')}</MenuItem>
-    {/each}
+    </div>
   </Menu>
 </MenuContainer>

src/lib/pages/workflows-with-new-search.svelte

@@ -218,8 +218,8 @@
 
 <header class="flex flex-col gap-2">
   <div class="flex flex-col justify-between gap-2 md:flex-row">
-    <div class="flex flex-row flex-wrap items-start gap-2">
-      <div>
+    <div class="flex flex-col">
+      <div class="flex flex-row flex-wrap items-start gap-1">
         <h1 class="flex items-center gap-2 leading-7" data-cy="workflows-title">
           {#if $supportsAdvancedVisibility}
             <span data-testid="workflow-count"
@@ -233,12 +233,12 @@
             <Translate key="workflows.recent-workflows" />
           {/if}
         </h1>
-        <p class="text-xs text-secondary">
-          {refreshTimeFormatted}
-        </p>
+        <WorkflowCountRefresh count={$workflowCount.newCount} />
+        <WorkflowCounts bind:refreshTime />
       </div>
-      <WorkflowCountRefresh count={$workflowCount.newCount} />
-      <WorkflowCounts bind:refreshTime />
+      <p class="text-xs text-secondary">
+        {refreshTimeFormatted}
+      </p>
     </div>
     {#if $$slots['header-actions'] || workflowStartEnabled}
       <div class="flex items-center gap-4">

src/lib/utilities/format-date.test.ts

@@ -79,10 +79,14 @@ describe('formatDate', () => {
     );
   });
 
-  it('should not format other timezones as relative', () => {
-    expect(formatDate(date, 'UTC', { relative: true })).toEqual(
-      'Apr 13, 2022, 4:29:35.63 PM UTC',
-    );
+  it('timezone does not matter when switching to relative time', () => {
+    expect(formatDate(date, 'UTC', { relative: true })).toContain('ago');
+    expect(
+      formatDate(date, 'Central Standard Time', { relative: true }),
+    ).toContain('ago');
+    expect(
+      formatDate(date, 'Greenwich Mean Time', { relative: true }),
+    ).toContain('ago');
   });
 
   it('should format relative local time with a custom label', () => {

src/lib/utilities/format-date.ts

@@ -108,7 +108,7 @@ export function formatDate(
     const parsed = parseJSON(new Date(date));
 
     // Handle relative time first (takes precedence over format)
-    if (timeFormat === BASE_TIME_FORMAT_OPTIONS.LOCAL && relative) {
+    if (relative) {
       return (
         formatDistanceToNowStrict(parsed, {
           ...(!flexibleUnits &&