system-menu: fixing missing dropdown on mobile and padding

pkg/grid/src/app.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import Mousetrap from 'mousetrap';
 import { BrowserRouter, Switch, Route, useHistory } from 'react-router-dom';
 import { Grid } from './pages/Grid';
@@ -8,33 +8,22 @@ import useKilnState from './state/kiln';
 import { usePreferencesStore } from './nav/preferences/usePreferencesStore';
 import useContactState from './state/contact';
 import api from './state/api';
+import { useMedia } from './logic/useMedia';
 
 const AppRoutes = () => {
   const { push } = useHistory();
   const theme = usePreferencesStore((s) => s.theme);
-
-  const updateThemeClass = useCallback(
-    (e: MediaQueryListEvent) => {
-      if ((e.matches && theme === 'automatic') || theme === 'dark') {
-        document.body.classList.add('dark');
-        usePreferencesStore.setState({ currentTheme: 'dark' });
-      } else {
-        document.body.classList.remove('dark');
-        usePreferencesStore.setState({ currentTheme: 'light' });
-      }
-    },
-    [theme]
-  );
+  const isDarkMode = useMedia('(prefers-color-scheme: dark)');
 
   useEffect(() => {
-    const query = window.matchMedia('(prefers-color-scheme: dark)');
-
-    query.addEventListener('change', updateThemeClass);
-    updateThemeClass({ matches: query.matches } as MediaQueryListEvent);
-    return () => {
-      query.removeEventListener('change', updateThemeClass);
-    };
-  }, []);
+    if ((isDarkMode && theme === 'automatic') || theme === 'dark') {
+      document.body.classList.add('dark');
+      usePreferencesStore.setState({ currentTheme: 'dark' });
+    } else {
+      document.body.classList.remove('dark');
+      usePreferencesStore.setState({ currentTheme: 'light' });
+    }
+  }, [isDarkMode, theme]);
 
   useEffect(() => {
     window.name = 'grid';

pkg/grid/src/logic/useMedia.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useMedia = (mediaQuery: string) => {
+  const [match, setMatch] = useState(false);
+
+  const update = useCallback((e: MediaQueryListEvent) => {
+    setMatch(e.matches);
+  }, []);
+
+  useEffect(() => {
+    const query = window.matchMedia(mediaQuery);
+
+    query.addEventListener('change', update);
+    update({ matches: query.matches } as MediaQueryListEvent);
+    return () => {
+      query.removeEventListener('change', update);
+    };
+  }, [update]);
+
+  return match;
+};

pkg/grid/src/nav/Nav.tsx

@@ -161,7 +161,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
         >
           <header
             ref={dialogNavRef}
-            className="max-w-[712px] w-full mx-auto mt-6 mb-3 order-last sm:order-none"
+            className="max-w-[712px] w-full mx-auto my-6 sm:mb-3 order-last sm:order-none"
           />
           <div
             id="leap-items"

pkg/grid/src/nav/SystemMenu.tsx

@@ -8,6 +8,7 @@ import { Adjust } from '../components/icons/Adjust';
 import { useVat } from '../state/kiln';
 import { disableDefault, handleDropdownLink } from '../state/util';
 import { MenuState } from './Nav';
+import { useMedia } from '../logic/useMedia';
 
 type SystemMenuProps = HTMLAttributes<HTMLButtonElement> & {
   menu: MenuState;
@@ -25,6 +26,7 @@ export const SystemMenu = ({ className, menu, open, navOpen }: SystemMenuProps)
   const [copied, setCopied] = useState(false);
   const garden = useVat('garden');
   const hash = garden ? getHash(garden) : null;
+  const isMobile = useMedia('(max-width: 639px)');
 
   const copyHash = useCallback((event: Event) => {
     event.preventDefault();
@@ -71,11 +73,11 @@ export const SystemMenu = ({ className, menu, open, navOpen }: SystemMenuProps)
           </DropdownMenu.Trigger>
           <Route path="/system-menu">
             <DropdownMenu.Content
-              portalled={false}
               onCloseAutoFocus={disableDefault}
               onInteractOutside={preventFlash}
               onFocusOutside={preventFlash}
               onPointerDownOutside={preventFlash}
+              side={isMobile ? 'top' : 'bottom'}
               sideOffset={12}
               className="dropdown relative z-40 min-w-64 p-4 font-semibold text-gray-500 bg-white"
             >