refactor(web): menu positioning

web/src/components/AppBar.jsx

@@ -82,7 +82,7 @@ export default function AppBar({ title }) {
       </div>
       <LinkedLogo />
       <div className="flex-grow-1 flex justify-end w-full">
-        <div ref={moreRef}>
+        <div className="w-auto" ref={moreRef}>
           <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
             <MoreIcon />
           </Button>

web/src/components/Menu.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import RelativeModal from './RelativeModal';
 import { useCallback, useEffect } from 'preact/hooks';
 
-export default function Menu({ className, children, onDismiss, relativeTo }) {
+export default function Menu({ className, children, onDismiss, relativeTo, widthRelative }) {
   return relativeTo ? (
     <RelativeModal
       children={children}
@@ -11,6 +11,7 @@ export default function Menu({ className, children, onDismiss, relativeTo }) {
       onDismiss={onDismiss}
       portalRootID="menus"
       relativeTo={relativeTo}
+      widthRelative={widthRelative}
     />
   ) : null;
 }
@@ -38,11 +39,11 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
       role="option"
     >
       {Icon ? (
-        <div className="w-6 h-6 self-center mr-4 text-gray-500">
+        <div className="w-6 h-6 self-center mr-4 text-gray-500 flex-shrink-0">
           <Icon />
         </div>
       ) : null}
-      {label}
+      <div class="whitespace-nowrap">{label}</div>
     </div>
   );
 }

web/src/components/RelativeModal.jsx

@@ -2,10 +2,18 @@ import { h, Fragment } from 'preact';
 import { createPortal } from 'preact/compat';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 
-const WINDOW_PADDING = 20;
+const WINDOW_PADDING = 10;
 
-export default function RelativeModal({ className, role = 'dialog', children, onDismiss, portalRootID, relativeTo }) {
-  const [position, setPosition] = useState({ top: -999, left: 0, width: 0 });
+export default function RelativeModal({
+  className,
+  role = 'dialog',
+  children,
+  onDismiss,
+  portalRootID,
+  relativeTo,
+  widthRelative = false,
+}) {
+  const [position, setPosition] = useState({ top: -999, left: -999 });
   const [show, setShow] = useState(false);
   const portalRoot = portalRootID && document.getElementById(portalRootID);
   const ref = useRef(null);
@@ -44,12 +52,15 @@ export default function RelativeModal({ className, role = 'dialog', children, on
       const windowWidth = window.innerWidth;
       const windowHeight = window.innerHeight;
       const { width: menuWidth, height: menuHeight } = ref.current.getBoundingClientRect();
-      const { x, y, width, height } = relativeTo.current.getBoundingClientRect();
+      const { x, y, width: relativeWidth, height } = relativeTo.current.getBoundingClientRect();
+
+      const width = widthRelative ? relativeWidth : menuWidth;
+
       let top = y + height;
       let left = x;
       // too far right
-      if (left + menuWidth >= windowWidth - WINDOW_PADDING) {
-        left = windowWidth - menuWidth - WINDOW_PADDING;
+      if (left + width >= windowWidth - WINDOW_PADDING) {
+        left = windowWidth - width - WINDOW_PADDING;
       }
       // too far left
       else if (left < WINDOW_PADDING) {
@@ -65,20 +76,23 @@ export default function RelativeModal({ className, role = 'dialog', children, on
       }
 
       const maxHeight = windowHeight - WINDOW_PADDING * 2 > menuHeight ? null : windowHeight - WINDOW_PADDING * 2;
-      setPosition({ left, top: top + window.scrollY, width, height: maxHeight });
+      const newPosition = { left: left + window.scrollX, top: top + window.scrollY, maxHeight };
+      if (widthRelative) {
+        newPosition.width = relativeWidth;
+      }
+      setPosition(newPosition);
       const focusable = ref.current.querySelector('[tabindex]');
-      focusable && console.log('focusing');
       focusable && focusable.focus();
     }
-  }, [relativeTo && relativeTo.current, ref && ref.current]);
+  }, [relativeTo && relativeTo.current, ref && ref.current, widthRelative]);
 
   useEffect(() => {
-    if (position.width) {
+    if (position.top >= 0) {
       setShow(true);
     } else {
       setShow(false);
     }
-  }, [show, position.width, ref.current]);
+  }, [show, position.top, ref.current]);
 
   const menu = (
     <Fragment>
@@ -91,13 +105,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
         onkeydown={handleKeydown}
         role={role}
         ref={ref}
-        style={
-          position.width > 0
-            ? `min-width: ${position.width}px; ${position.height ? `max-height: ${position.height}px;` : ''} top: ${
-                position.top
-              }px; left: ${position.left}px`
-            : ''
-        }
+        style={position.top >= 0 ? position : null}
       >
         {children}
       </div>

web/src/components/Select.jsx

@@ -95,7 +95,7 @@ export default function Select({ label, onChange, options: inputOptions = [], se
         value={options[selected]?.label}
       />
       {showMenu ? (
-        <Menu className="rounded-t-none" onDismiss={handleDismiss} relativeTo={ref}>
+        <Menu className="rounded-t-none" onDismiss={handleDismiss} relativeTo={ref} widthRelative>
           {options.map(({ value, label }, i) => (
             <MenuItem key={value} label={label} focus={focused === i} onSelect={handleSelect} value={value} />
           ))}