mobile responsive

components/ui/menu.tsx

@@ -10,6 +10,12 @@ export type MenuItem = {
   destructive?: boolean;
 };
 
+
+// Menu geometry, for keeping it on screen: w-44, rows of py-2 text-sm.
+const MENU_WIDTH = 176;
+const MENU_ROW = 36;
+const MENU_GAP = 8;
+
 /**
  * A kebab (⋯) trigger with a small dropdown of actions — keeps secondary /
  * destructive row actions hidden until opened. The menu is fixed-positioned
@@ -50,7 +56,21 @@ export function RowMenu({ items }: { items: MenuItem[] }) {
   function toggle() {
     if (!open && btnRef.current) {
       const r = btnRef.current.getBoundingClientRect();
-      setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      // Right-aligned to the button, but kept on screen: on a phone the
+      // button can sit at the left of a card, where a right-aligned menu
+      // would hang off the edge. Near the bottom it opens upwards instead.
+      const right = Math.max(
+        MENU_GAP,
+        Math.min(vw - r.right, vw - MENU_WIDTH - MENU_GAP),
+      );
+      const height = items.length * MENU_ROW + 8;
+      const top =
+        r.bottom + 4 + height > vh - MENU_GAP
+          ? Math.max(MENU_GAP, r.top - 4 - height)
+          : r.bottom + 4;
+      setPos({ top, right });
     }
     setOpen((v) => !v);
   }