Enhance PopButton to allow putting the menu in a provided location

Previously, we always added the menu immediately after the triggering
button. This can mess with CSS based on first/last child.

Author: shepmaster

ui/frontend/PopButton.tsx

@@ -13,6 +13,7 @@ import {
   useRole,
 } from '@floating-ui/react';
 import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import styles from './PopButton.module.css';
 
@@ -23,9 +24,10 @@ interface NewPopProps {
     } & React.RefAttributes<HTMLButtonElement>
   >;
   Menu: React.ComponentType<{ close: () => void }>;
+  menuContainer?: React.RefObject<HTMLDivElement>;
 }
 
-const PopButton: React.FC<NewPopProps> = ({ Button, Menu }) => {
+const PopButton: React.FC<NewPopProps> = ({ Button, Menu, menuContainer }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = useCallback(() => setIsOpen((v) => !v), []);
   const close = useCallback(() => setIsOpen(false), []);
@@ -45,30 +47,34 @@ const PopButton: React.FC<NewPopProps> = ({ Button, Menu }) => {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
 
+  const FloatingMenu = isOpen && (
+    <FloatingFocusManager context={context}>
+      <div
+        ref={refs.setFloating}
+        className={styles.container}
+        style={{
+          position: strategy,
+          top: y ?? 0,
+          left: x ?? 0,
+          width: 'max-content',
+        }}
+        {...getFloatingProps()}
+      >
+        <FloatingArrow ref={arrowRef} context={context} height={10} width={20} fill="white" />
+        <div className={containerClass}>
+          <Menu close={close} />
+        </div>
+      </div>
+    </FloatingFocusManager>
+  );
+
+  const Portal = menuContainer?.current && createPortal(FloatingMenu, menuContainer.current);
+
   return (
     <>
       <Button toggle={toggle} ref={refs.setReference} {...getReferenceProps()} />
 
-      {isOpen && (
-        <FloatingFocusManager context={context}>
-          <div
-            ref={refs.setFloating}
-            className={styles.container}
-            style={{
-              position: strategy,
-              top: y ?? 0,
-              left: x ?? 0,
-              width: 'max-content',
-            }}
-            {...getFloatingProps()}
-          >
-            <FloatingArrow ref={arrowRef} context={context} height={10} width={20} fill="white" />
-            <div className={styles.content}>
-              <Menu close={close} />
-            </div>
-          </div>
-        </FloatingFocusManager>
-      )}
+      {Portal || FloatingMenu}
     </>
   );
 };