From 0376aa0f7f4987dbbad36d6169ae1672b53887b3 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 4 Oct 2023 09:34:00 -0600
Subject: [PATCH] Make TimezoneSelect position responsive based on screen width
 (#1664)

---
 src/lib/components/timezone-select.svelte | 4 +++-
 src/lib/components/top-nav.svelte         | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/timezone-select.svelte b/src/lib/components/timezone-select.svelte
index 575b3d436..5032d248a 100644
--- a/src/lib/components/timezone-select.svelte
+++ b/src/lib/components/timezone-select.svelte
@@ -23,6 +23,8 @@
   import { capitalize } from '$lib/utilities/format-camel-case';
   import { formatUTCOffset, getLocalTime } from '$lib/utilities/format-date';
 
+  export let position: 'left' | 'right' = 'right';
+
   const localTime = getLocalTime();
   const QuickTimezoneOptions: TimeFormatOptions = [
     {
@@ -84,7 +86,7 @@
   </MenuButton>
   <Menu
     id="timezones-menu"
-    position="right"
+    {position}
     class="w-[10rem] sm:w-[20rem] md:w-[26rem]"
   >
     <Input
diff --git a/src/lib/components/top-nav.svelte b/src/lib/components/top-nav.svelte
index f335baae9..dc63cee69 100644
--- a/src/lib/components/top-nav.svelte
+++ b/src/lib/components/top-nav.svelte
@@ -19,6 +19,8 @@
   export let logout: () => void;
   export let namespaceList: NamespaceListItem[] = [];
 
+  let screenWidth: number;
+
   $: namespace = $page.params.namespace;
   $: pathNameSplit = $page.url.pathname.split('/');
   $: showNamespaceSpecificNav =
@@ -40,6 +42,8 @@
   };
 </script>
 
+<svelte:window bind:innerWidth={screenWidth} />
+
 <nav
   class="sticky top-0 z-30 flex w-full flex-col items-center justify-end border-b-2 bg-gray-100 p-1 px-4 md:flex-row md:px-8"
   data-testid="top-nav"
@@ -64,7 +68,7 @@
     {/if}
   </div>
   <div class="flex items-center gap-2">
-    <TimezoneSelect />
+    <TimezoneSelect position={screenWidth < 768 ? 'left' : 'right'} />
     {#if showNamespaceSpecificNav}
       <DataEncoderStatus />
     {/if}