Merge pull request #119 from tloncorp/hm/wayfinding-placement

wayfinding: placement

ui/src/components/LandscapeWayfinding.tsx

@@ -128,7 +128,7 @@ export default function LandscapeWayfinding() {
 
   return (
     <Dropdown.Root>
-      <div className="absolute left-4 bottom-16 z-[100]">
+      <div className="fixed bottom-[4.25rem] left-4 z-[100] sm:bottom-4">
         <Dropdown.Trigger className="relative" asChild>
           <button className="h-9 w-9 cursor-pointer rounded-lg bg-black text-xl text-white">
             ?

ui/src/nav/Nav.tsx

@@ -183,7 +183,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
       {/* Using portal so that we can retain the same nav items both in the dialog and in the base header */}
       <Portal.Root
         containerRef={dialogContentOpen ? dialogNavRef : navRef}
-        className="flex w-full items-center justify-center space-x-2"
+        className="flex w-full items-center space-x-2 sm:justify-center"
       >
         <SystemPrefsLink menuState={menuState} systemBlocked={systemBlocked} />
         <NotificationsLink

ui/src/pages/Grid.tsx

@@ -44,7 +44,6 @@ export const Grid: FunctionComponent = () => {
 
   return (
     <div className="flex h-screen w-full flex-col">
-      {!disableWayfinding && <LandscapeWayfinding />}
       <header className="fixed bottom-0 left-0 z-30 flex w-full justify-center px-4 sm:sticky sm:bottom-auto sm:top-0">
         <Nav menu={menu} />
       </header>
@@ -63,6 +62,7 @@ export const Grid: FunctionComponent = () => {
           </Route>
         </ErrorBoundary>
       </main>
+      {!disableWayfinding && <LandscapeWayfinding />}
     </div>
   );
 };