Make PopButtons work in both up and down directions

The previous border would create an issue when the arrow was attached
to the bottom of the pop up. This replaces the border with a dark
shadow.

Author: shepmaster

ui/frontend/PopButton.module.css

@@ -13,15 +13,22 @@ $arrow-width: 20px;
   }
 }
 
-.content {
-  margin: 0 $arrow-height $arrow-height $arrow-height;
+.-content {
+  margin: $arrow-height;
   box-shadow:
-    0 1px 4px -2px rgb(0 0 0 / 60%),
-    inset 0 1px 0 white;
-  border-right: 1px solid $vertical-border-color;
-  border-bottom: 1px solid var(--header-accent-border);
-  border-left: 1px solid $vertical-border-color;
+    5px 5px 20px -3px rgb(0 0 0 / 25%),
+    0 0 5px -2px rgb(0 0 0 / 90%);
   border-radius: var(--header-border-radius);
   background: $bg-color;
   color: $fg-color;
 }
+
+.contentBottom {
+  composes: -content;
+  margin-top: 0;
+}
+
+.contentTop {
+  composes: -content;
+  margin-bottom: 0;
+}

ui/frontend/PopButton.tsx

@@ -1,6 +1,7 @@
 import {
   FloatingArrow,
   FloatingFocusManager,
+  Placement,
   arrow,
   autoUpdate,
   flip,
@@ -31,20 +32,27 @@ interface NewPopProps {
   menuContainer?: React.RefObject<HTMLDivElement>;
 }
 
+const CONTAINER_STYLE: { [key in Placement]?: string } = {
+  top: styles.contentTop,
+  bottom: styles.contentBottom,
+};
+
 const PopButton: React.FC<NewPopProps> = ({ Button, Menu, menuContainer }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = useCallback(() => setIsOpen((v) => !v), []);
   const close = useCallback(() => setIsOpen(false), []);
 
   const arrowRef = useRef(null);
 
-  const { x, y, refs, strategy, context } = useFloating({
+  const { x, y, refs, strategy, context, placement } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
     whileElementsMounted: autoUpdate,
   });
 
+  const containerClass = CONTAINER_STYLE[placement] ?? '';
+
   const click = useClick(context);
   const dismiss = useDismiss(context);
   const role = useRole(context);