Make TimezoneSelect position responsive based on screen width (#1664)

temporalio · Oct 4, 2023 · 0376aa0 · 0376aa0
1 parent 198b298
commit 0376aa0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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}