From 0ab562703e96e9a1f13784f547faddb729664a07 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 17 Sep 2024 14:19:38 -0500
Subject: [PATCH 1/9] use headless dropdown menu for user menu in topbar

---
 app/components/TopBar.tsx | 67 +++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 4c5e2e2366..c07376a731 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -5,14 +5,16 @@
  *
  * Copyright Oxide Computer Company
  */
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+import cn from 'classnames'
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 import { navToLogin, useApiMutation } from '@oxide/api'
 import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react'
 
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
-import { Button } from '~/ui/lib/Button'
-import { DropdownMenu } from '~/ui/lib/DropdownMenu'
+import { buttonStyle } from '~/ui/lib/Button'
 import { pb } from '~/util/path-builder'
 
 export function TopBar({ children }: { children: React.ReactNode }) {
@@ -40,31 +42,42 @@ export function TopBar({ children }: { children: React.ReactNode }) {
         <div className="mx-3 flex h-[60px] shrink-0 items-center justify-between">
           <div className="flex items-center">{otherPickers}</div>
           <div className="flex items-center gap-2">
-            {/* <Button variant="secondary" size="icon" className="ml-2" title="Notifications">
-              <Notifications16Icon className="text-quaternary" />
-            </Button> */}
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger asChild>
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  aria-label="User menu"
-                  innerClassName="space-x-2"
-                >
-                  <Profile16Icon className="text-quaternary" />
-                  <span className="normal-case text-sans-md text-secondary">
-                    {me.displayName || 'User'}
-                  </span>
-                  <DirectionDownIcon className="!w-2.5" />
-                </Button>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content align="end" sideOffset={8}>
-                <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
-                <DropdownMenu.Item onSelect={() => logout.mutate({})}>
-                  Sign out
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+            <Menu>
+              <MenuButton
+                className={cn(
+                  'flex items-center gap-2',
+                  buttonStyle({ size: 'sm', variant: 'secondary' })
+                )}
+                aria-label="User menu"
+              >
+                <Profile16Icon className="text-quaternary" />
+                <span className="normal-case text-sans-md text-secondary">
+                  {me.displayName || 'User'}
+                </span>
+                <DirectionDownIcon className="!w-2.5" />
+              </MenuButton>
+              {/* TODO: fix hover style + should be able to click anywhere in the menu item */}
+              <MenuItems
+                anchor="bottom end"
+                className="DropdownMenuContent [--anchor-gap:8px]"
+              >
+                {/* TODO: extract Item and LinkItem components*/}
+                <MenuItem>
+                  <Link className="DropdownMenuItem ox-menu-item" to={pb.profile()}>
+                    Settings
+                  </Link>
+                </MenuItem>
+                <MenuItem>
+                  <button
+                    type="button"
+                    onClick={() => logout.mutate({})}
+                    className="DropdownMenuItem ox-menu-item"
+                  >
+                    Sign out
+                  </button>
+                </MenuItem>
+              </MenuItems>
+            </Menu>
           </div>
         </div>
       </div>

From ac920b333e1ac9399fa1fa51bd881a089642994f Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 17 Sep 2024 14:35:24 -0500
Subject: [PATCH 2/9] extract DropdownMenu and convert TopBarPicker

---
 app/components/TopBar.tsx       | 41 +++++----------
 app/components/TopBarPicker.tsx | 78 ++++++++++++++---------------
 app/ui/lib/DropdownMenu2.tsx    | 88 +++++++++++++++++++++++++++++++++
 3 files changed, 139 insertions(+), 68 deletions(-)
 create mode 100644 app/ui/lib/DropdownMenu2.tsx

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index c07376a731..b83da46cd8 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -5,16 +5,15 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
 import cn from 'classnames'
 import React from 'react'
-import { Link } from 'react-router-dom'
 
 import { navToLogin, useApiMutation } from '@oxide/api'
 import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react'
 
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { buttonStyle } from '~/ui/lib/Button'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu2'
 import { pb } from '~/util/path-builder'
 
 export function TopBar({ children }: { children: React.ReactNode }) {
@@ -42,11 +41,11 @@ export function TopBar({ children }: { children: React.ReactNode }) {
         <div className="mx-3 flex h-[60px] shrink-0 items-center justify-between">
           <div className="flex items-center">{otherPickers}</div>
           <div className="flex items-center gap-2">
-            <Menu>
-              <MenuButton
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger
                 className={cn(
-                  'flex items-center gap-2',
-                  buttonStyle({ size: 'sm', variant: 'secondary' })
+                  buttonStyle({ size: 'sm', variant: 'secondary' }),
+                  'flex items-center gap-2'
                 )}
                 aria-label="User menu"
               >
@@ -55,29 +54,15 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                   {me.displayName || 'User'}
                 </span>
                 <DirectionDownIcon className="!w-2.5" />
-              </MenuButton>
+              </DropdownMenu.Trigger>
               {/* TODO: fix hover style + should be able to click anywhere in the menu item */}
-              <MenuItems
-                anchor="bottom end"
-                className="DropdownMenuContent [--anchor-gap:8px]"
-              >
-                {/* TODO: extract Item and LinkItem components*/}
-                <MenuItem>
-                  <Link className="DropdownMenuItem ox-menu-item" to={pb.profile()}>
-                    Settings
-                  </Link>
-                </MenuItem>
-                <MenuItem>
-                  <button
-                    type="button"
-                    onClick={() => logout.mutate({})}
-                    className="DropdownMenuItem ox-menu-item"
-                  >
-                    Sign out
-                  </button>
-                </MenuItem>
-              </MenuItems>
-            </Menu>
+              <DropdownMenu.Content gap={8}>
+                <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
+                <DropdownMenu.Item onSelect={() => logout.mutate({})}>
+                  Sign out
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
           </div>
         </div>
       </div>
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 884335fc82..d8b64b8ff0 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -24,8 +24,8 @@ import {
 } from '~/hooks/use-params'
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { PAGE_SIZE } from '~/table/QueryTable'
-import { Button } from '~/ui/lib/Button'
-import { DropdownMenu } from '~/ui/lib/DropdownMenu'
+import { buttonStyle } from '~/ui/lib/Button'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu2'
 import { Identicon } from '~/ui/lib/Identicon'
 import { Wrap } from '~/ui/util/wrap'
 import { pb } from '~/util/path-builder'
@@ -95,14 +95,14 @@ const TopBarPicker = (props: TopBarPickerProps) => {
         {props.items && (
           <div className="ml-2 shrink-0">
             <DropdownMenu.Trigger
-              className="group"
+              className={cn(
+                'group h-[2rem] w-[1.125rem]',
+                buttonStyle({ size: 'icon', variant: 'ghost' })
+              )}
               aria-label={props['aria-label']}
-              asChild
             >
-              <Button size="icon" variant="ghost" className="h-[2rem] w-[1.125rem]">
-                {/* aria-hidden is a tip from the Reach docs */}
-                <SelectArrows6Icon className="text-secondary" aria-hidden />
-              </Button>
+              {/* aria-hidden is a tip from the Reach docs */}
+              <SelectArrows6Icon className="text-secondary" aria-hidden />
             </DropdownMenu.Trigger>
           </div>
         )}
@@ -110,38 +110,36 @@ const TopBarPicker = (props: TopBarPickerProps) => {
       {/* TODO: item size and focus highlight */}
       {/* TODO: popover position should be further right */}
       {props.items && (
-        // portal is necessary to avoid the menu popover getting its own after:
-        // separator thing
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content
-            className="mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
-            align="start"
-          >
-            {props.items.length > 0 ? (
-              props.items.map(({ label, to }) => {
-                const isSelected = props.current === label
-                return (
-                  <DropdownMenu.Item asChild key={label}>
-                    <Link to={to} className={cn({ 'is-selected': isSelected })}>
-                      <span className="flex w-full items-center gap-2">
-                        {label}
-                        {isSelected && <Success12Icon className="-mr-3 block" />}
-                      </span>
-                    </Link>
-                  </DropdownMenu.Item>
-                )
-              })
-            ) : (
-              <DropdownMenu.Item
-                className="!pr-3 !text-center !text-secondary hover:cursor-default"
-                onSelect={() => {}}
-                disabled
-              >
-                {props.noItemsText || 'No items found'}
-              </DropdownMenu.Item>
-            )}
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
+          anchor="bottom start"
+        >
+          {props.items.length > 0 ? (
+            props.items.map(({ label, to }) => {
+              const isSelected = props.current === label
+              return (
+                <DropdownMenu.LinkItem
+                  key={label}
+                  to={to}
+                  className={cn({ 'is-selected': isSelected })}
+                >
+                  <span className="flex w-full items-center gap-2">
+                    {label}
+                    {isSelected && <Success12Icon className="-mr-3 block" />}
+                  </span>
+                </DropdownMenu.LinkItem>
+              )
+            })
+          ) : (
+            <DropdownMenu.Item
+              className="!pr-3 !text-center !text-secondary hover:cursor-default"
+              onSelect={() => {}}
+              disabled
+            >
+              {props.noItemsText || 'No items found'}
+            </DropdownMenu.Item>
+          )}
+        </DropdownMenu.Content>
       )}
     </DropdownMenu.Root>
   )
diff --git a/app/ui/lib/DropdownMenu2.tsx b/app/ui/lib/DropdownMenu2.tsx
new file mode 100644
index 0000000000..db59a4d76d
--- /dev/null
+++ b/app/ui/lib/DropdownMenu2.tsx
@@ -0,0 +1,88 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  type MenuItemsProps,
+} from '@headlessui/react'
+import cn from 'classnames'
+import { forwardRef, type ForwardedRef, type ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+
+export const Root = Menu
+
+export const Trigger = MenuButton
+
+type ContentProps = {
+  className?: string
+  children: ReactNode
+  anchor?: MenuItemsProps['anchor']
+  portal?: boolean
+  /** Spacing in px, passed as --anchor-gap */
+  gap?: number
+}
+
+export function Content({
+  className,
+  children,
+  portal,
+  anchor = 'bottom end',
+  gap,
+}: ContentProps) {
+  return (
+    <MenuItems
+      anchor={anchor}
+      className={cn('DropdownMenuContent', gap && `[--anchor-gap:${gap}px]`, className)}
+      // necessary to turn off scroll locking so the scrollbar doesn't pop in
+      // and out as menu closes and opens
+      modal={false}
+      portal={portal}
+    >
+      {children}
+    </MenuItems>
+  )
+}
+
+type LinkItemProps = { className?: string; to: string; children: ReactNode }
+
+export function LinkItem({ className, to, children }: LinkItemProps) {
+  return (
+    <MenuItem>
+      <Link className={cn('DropdownMenuItem ox-menu-item', className)} to={to}>
+        {children}
+      </Link>
+    </MenuItem>
+  )
+}
+
+type ButtonRef = ForwardedRef<HTMLButtonElement>
+type ItemProps = {
+  className?: string
+  onSelect?: () => void
+  children: ReactNode
+  disabled?: boolean
+}
+
+// need to forward ref because of tooltips on disabled menu buttons
+export const Item = forwardRef(
+  ({ className, onSelect, children, disabled }: ItemProps, ref: ButtonRef) => (
+    <MenuItem disabled={disabled}>
+      <button
+        type="button"
+        className={cn('DropdownMenuItem ox-menu-item', className)}
+        ref={ref}
+        onClick={onSelect}
+      >
+        {children}
+      </button>
+    </MenuItem>
+  )
+)

From d08d2d076ba8a731d6c5dbb7fdea6f8dc4e27506 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 17 Sep 2024 16:39:28 -0500
Subject: [PATCH 3/9] convert the last two dropdowns and uninstall
 @radix-ui/react-dropdown-menu

---
 app/components/MoreActionsMenu.tsx |   4 +-
 app/components/TopBar.tsx          |   2 +-
 app/components/TopBarPicker.tsx    |   2 +-
 app/table/columns/action-col.tsx   |  64 +++++----
 app/ui/lib/DropdownMenu.tsx        | 116 ++++++++++------
 app/ui/lib/DropdownMenu2.tsx       |  88 ------------
 package-lock.json                  | 207 -----------------------------
 package.json                       |   1 -
 8 files changed, 111 insertions(+), 373 deletions(-)
 delete mode 100644 app/ui/lib/DropdownMenu2.tsx

diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index 67a6955dd0..74b643bdf9 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -8,7 +8,7 @@
 import { More12Icon } from '@oxide/design-system/icons/react'
 
 import type { MenuAction } from '~/table/columns/action-col'
-import { DropdownMenu } from '~/ui/lib/DropdownMenu'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { Wrap } from '~/ui/util/wrap'
 
@@ -26,7 +26,7 @@ export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
       >
         <More12Icon className="text-tertiary" />
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="end" className="mt-2">
+      <DropdownMenu.Content anchor="bottom end" className="mt-2">
         {actions.map((a) => (
           <Wrap key={a.label} when={!!a.disabled} with={<Tooltip content={a.disabled} />}>
             <DropdownMenu.Item
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index b83da46cd8..de6128cc3f 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -13,7 +13,7 @@ import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/rea
 
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { buttonStyle } from '~/ui/lib/Button'
-import * as DropdownMenu from '~/ui/lib/DropdownMenu2'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { pb } from '~/util/path-builder'
 
 export function TopBar({ children }: { children: React.ReactNode }) {
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index d8b64b8ff0..346956ebd3 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -25,7 +25,7 @@ import {
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { PAGE_SIZE } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
-import * as DropdownMenu from '~/ui/lib/DropdownMenu2'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { Identicon } from '~/ui/lib/Identicon'
 import { Wrap } from '~/ui/util/wrap'
 import { pb } from '~/util/path-builder'
diff --git a/app/table/columns/action-col.tsx b/app/table/columns/action-col.tsx
index 58a348cf04..11497f4342 100644
--- a/app/table/columns/action-col.tsx
+++ b/app/table/columns/action-col.tsx
@@ -11,7 +11,7 @@ import { useMemo } from 'react'
 
 import { More12Icon } from '@oxide/design-system/icons/react'
 
-import { DropdownMenu } from '~/ui/lib/DropdownMenu'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { Wrap } from '~/ui/util/wrap'
 import { kebabCase } from '~/util/str'
@@ -75,41 +75,37 @@ export const RowActions = ({ id, copyIdLabel = 'Copy ID', actions }: RowActionsP
       >
         <More12Icon className="text-tertiary" />
       </DropdownMenu.Trigger>
-      {/* portal fixes mysterious z-index issue where menu is behind button */}
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content align="end" className="-mt-3 mr-2">
-          {id && (
-            <DropdownMenu.Item
-              onSelect={() => {
-                window.navigator.clipboard.writeText(id)
-              }}
+      <DropdownMenu.Content anchor="bottom end" className="-mt-3 mr-2">
+        {id && (
+          <DropdownMenu.Item
+            onSelect={() => {
+              window.navigator.clipboard.writeText(id)
+            }}
+          >
+            {copyIdLabel}
+          </DropdownMenu.Item>
+        )}
+        {actions?.map((action) => {
+          // TODO: Tooltip on disabled button broke, probably due to portal
+          return (
+            <Wrap
+              when={!!action.disabled}
+              with={<Tooltip content={action.disabled} />}
+              key={kebabCase(`action-${action.label}`)}
             >
-              {copyIdLabel}
-            </DropdownMenu.Item>
-          )}
-          {actions?.map((action) => {
-            // TODO: Tooltip on disabled button broke, probably due to portal
-            return (
-              <Wrap
-                when={!!action.disabled}
-                with={<Tooltip content={action.disabled} />}
-                key={kebabCase(`action-${action.label}`)}
+              <DropdownMenu.Item
+                className={cn(action.className, {
+                  destructive: action.label.toLowerCase() === 'delete' && !action.disabled,
+                })}
+                onSelect={action.onActivate}
+                disabled={!!action.disabled}
               >
-                <DropdownMenu.Item
-                  className={cn(action.className, {
-                    destructive:
-                      action.label.toLowerCase() === 'delete' && !action.disabled,
-                  })}
-                  onSelect={action.onActivate}
-                  disabled={!!action.disabled}
-                >
-                  {action.label}
-                </DropdownMenu.Item>
-              </Wrap>
-            )
-          })}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
+                {action.label}
+              </DropdownMenu.Item>
+            </Wrap>
+          )
+        })}
+      </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
 }
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index 929296262a..a49234ff45 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -5,47 +5,85 @@
  *
  * Copyright Oxide Computer Company
  */
+
 import {
-  Content,
-  Item,
-  Portal,
-  Root,
-  Trigger,
-  type DropdownMenuContentProps,
-  type DropdownMenuItemProps,
-} from '@radix-ui/react-dropdown-menu'
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  type MenuItemsProps,
+} from '@headlessui/react'
 import cn from 'classnames'
-import { forwardRef, type ForwardedRef } from 'react'
+import { forwardRef, type ForwardedRef, type ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
-type DivRef = ForwardedRef<HTMLDivElement>
-
-// remove possibility of disabling links for now. if we put it back, make sure
-// to forwardRef on LinkItem so the disabled tooltip can work
-type LinkitemProps = Omit<DropdownMenuItemProps, 'disabled'> & { to: string }
-
-export const DropdownMenu = {
-  Root,
-  Trigger,
-  Portal,
-  // don't need to forward ref here for a particular reason but Radix gives a
-  // big angry warning if we don't
-  Content: forwardRef(({ className, ...props }: DropdownMenuContentProps, ref: DivRef) => (
-    <Content
-      {...props}
-      // prevents focus ring showing up on trigger when you close the menu
-      onCloseAutoFocus={(e) => e.preventDefault()}
-      className={cn('DropdownMenuContent', className)}
-      ref={ref}
-    />
-  )),
-  // need to forward ref because of tooltips on disabled menu buttons
-  Item: forwardRef(({ className, ...props }: DropdownMenuItemProps, ref: DivRef) => (
-    <Item {...props} className={cn('DropdownMenuItem ox-menu-item', className)} ref={ref} />
-  )),
-  LinkItem: ({ className, children, to, ...props }: LinkitemProps) => (
-    <Item {...props} className={cn('DropdownMenuItem ox-menu-item', className)} asChild>
-      <Link to={to}>{children}</Link>
-    </Item>
-  ),
+export const Root = Menu
+
+export const Trigger = MenuButton
+
+type ContentProps = {
+  className?: string
+  children: ReactNode
+  anchor?: MenuItemsProps['anchor']
+  portal?: boolean
+  /** Spacing in px, passed as --anchor-gap */
+  gap?: 8
 }
+
+export function Content({
+  className,
+  children,
+  portal,
+  anchor = 'bottom end',
+  gap,
+}: ContentProps) {
+  return (
+    <MenuItems
+      anchor={anchor}
+      // goofy gap because tailwind hates string interpolation
+      className={cn('DropdownMenuContent', gap === 8 && `[--anchor-gap:8px]`, className)}
+      // necessary to turn off scroll locking so the scrollbar doesn't pop in
+      // and out as menu closes and opens
+      modal={false}
+      portal={portal}
+    >
+      {children}
+    </MenuItems>
+  )
+}
+
+type LinkItemProps = { className?: string; to: string; children: ReactNode }
+
+export function LinkItem({ className, to, children }: LinkItemProps) {
+  return (
+    <MenuItem>
+      <Link className={cn('DropdownMenuItem ox-menu-item', className)} to={to}>
+        {children}
+      </Link>
+    </MenuItem>
+  )
+}
+
+type ButtonRef = ForwardedRef<HTMLButtonElement>
+type ItemProps = {
+  className?: string
+  onSelect?: () => void
+  children: ReactNode
+  disabled?: boolean
+}
+
+// need to forward ref because of tooltips on disabled menu buttons
+export const Item = forwardRef(
+  ({ className, onSelect, children, disabled }: ItemProps, ref: ButtonRef) => (
+    <MenuItem disabled={disabled}>
+      <button
+        type="button"
+        className={cn('DropdownMenuItem ox-menu-item', className)}
+        ref={ref}
+        onClick={onSelect}
+      >
+        {children}
+      </button>
+    </MenuItem>
+  )
+)
diff --git a/app/ui/lib/DropdownMenu2.tsx b/app/ui/lib/DropdownMenu2.tsx
deleted file mode 100644
index db59a4d76d..0000000000
--- a/app/ui/lib/DropdownMenu2.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * Copyright Oxide Computer Company
- */
-
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-  type MenuItemsProps,
-} from '@headlessui/react'
-import cn from 'classnames'
-import { forwardRef, type ForwardedRef, type ReactNode } from 'react'
-import { Link } from 'react-router-dom'
-
-export const Root = Menu
-
-export const Trigger = MenuButton
-
-type ContentProps = {
-  className?: string
-  children: ReactNode
-  anchor?: MenuItemsProps['anchor']
-  portal?: boolean
-  /** Spacing in px, passed as --anchor-gap */
-  gap?: number
-}
-
-export function Content({
-  className,
-  children,
-  portal,
-  anchor = 'bottom end',
-  gap,
-}: ContentProps) {
-  return (
-    <MenuItems
-      anchor={anchor}
-      className={cn('DropdownMenuContent', gap && `[--anchor-gap:${gap}px]`, className)}
-      // necessary to turn off scroll locking so the scrollbar doesn't pop in
-      // and out as menu closes and opens
-      modal={false}
-      portal={portal}
-    >
-      {children}
-    </MenuItems>
-  )
-}
-
-type LinkItemProps = { className?: string; to: string; children: ReactNode }
-
-export function LinkItem({ className, to, children }: LinkItemProps) {
-  return (
-    <MenuItem>
-      <Link className={cn('DropdownMenuItem ox-menu-item', className)} to={to}>
-        {children}
-      </Link>
-    </MenuItem>
-  )
-}
-
-type ButtonRef = ForwardedRef<HTMLButtonElement>
-type ItemProps = {
-  className?: string
-  onSelect?: () => void
-  children: ReactNode
-  disabled?: boolean
-}
-
-// need to forward ref because of tooltips on disabled menu buttons
-export const Item = forwardRef(
-  ({ className, onSelect, children, disabled }: ItemProps, ref: ButtonRef) => (
-    <MenuItem disabled={disabled}>
-      <button
-        type="button"
-        className={cn('DropdownMenuItem ox-menu-item', className)}
-        ref={ref}
-        onClick={onSelect}
-      >
-        {children}
-      </button>
-    </MenuItem>
-  )
-)
diff --git a/package-lock.json b/package-lock.json
index 395353411e..24e9e4015a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@oxide/design-system": "^1.4.6",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dialog": "^1.0.5",
-        "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-focus-guards": "1.0.1",
         "@radix-ui/react-tabs": "^1.1.0",
         "@react-aria/live-announcer": "^3.3.4",
@@ -2472,29 +2471,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
-      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz",
@@ -2699,35 +2675,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dropdown-menu": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz",
-      "integrity": "sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-menu": "2.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-controllable-state": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -2789,118 +2736,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-menu": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz",
-      "integrity": "sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-collection": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.0",
-        "@radix-ui/react-focus-guards": "1.1.0",
-        "@radix-ui/react-focus-scope": "1.1.0",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.0",
-        "@radix-ui/react-portal": "1.1.1",
-        "@radix-ui/react-presence": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-roving-focus": "1.1.0",
-        "@radix-ui/react-slot": "1.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.7"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
-      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
-      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.4",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
-      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0",
-        "@radix-ui/react-use-rect": "1.1.0",
-        "@radix-ui/react-use-size": "1.1.0",
-        "@radix-ui/rect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
@@ -3117,48 +2952,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
-      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/rect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-size": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
-      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
-      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
-      "license": "MIT"
-    },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.16",
       "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.16.tgz",
diff --git a/package.json b/package.json
index 35b52c362a..de52f1cad7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
     "@oxide/design-system": "^1.4.6",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-focus-guards": "1.0.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-aria/live-announcer": "^3.3.4",

From 69927e0cf59aaf3c0638a6d2df8d6a748fc20d65 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 17 Sep 2024 16:58:55 -0500
Subject: [PATCH 4/9] fix menu item width and hover bg color

---
 app/ui/styles/components/menu-button.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index 526a881ca5..d3950ba9f6 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -10,7 +10,7 @@
   @apply z-30 min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {
-    @apply block cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
+    @apply w-full block cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
 
     &.destructive {
       @apply text-destructive;
@@ -24,8 +24,7 @@
       @apply text-destructive-disabled;
     }
 
-    &[data-highlighted] {
-      /* background: hsl(211, 81%, 36%); */
+    &[data-focus] {
       outline: none;
       @apply bg-tertiary;
     }

From 2b6b2ff6f2b8f368d86175bfd412890c60eec5c9 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 17 Sep 2024 22:00:04 +0000
Subject: [PATCH 5/9] Bot commit: format with prettier

---
 app/ui/styles/components/menu-button.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index d3950ba9f6..f3429ff1ed 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -10,7 +10,7 @@
   @apply z-30 min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {
-    @apply w-full block cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
+    @apply block w-full cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
 
     &.destructive {
       @apply text-destructive;

From bf2d883d85a4a1672911774191548a610dfb0211 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 17 Sep 2024 17:14:06 -0500
Subject: [PATCH 6/9] fix menu position on more actions column

---
 app/table/columns/action-col.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/table/columns/action-col.tsx b/app/table/columns/action-col.tsx
index 11497f4342..f18d16a04a 100644
--- a/app/table/columns/action-col.tsx
+++ b/app/table/columns/action-col.tsx
@@ -75,7 +75,8 @@ export const RowActions = ({ id, copyIdLabel = 'Copy ID', actions }: RowActionsP
       >
         <More12Icon className="text-tertiary" />
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content anchor="bottom end" className="-mt-3 mr-2">
+      {/* offset moves menu in from the right so it doesn't align with the table border */}
+      <DropdownMenu.Content anchor={{ to: 'bottom end', offset: -6 }} className="-mt-2">
         {id && (
           <DropdownMenu.Item
             onSelect={() => {

From 46b9eec787bde043a880ace010fed2b36afa631f Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 17 Sep 2024 17:50:07 -0500
Subject: [PATCH 7/9] remove done todo

---
 app/components/TopBar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index de6128cc3f..a9024161ca 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -55,7 +55,6 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                 </span>
                 <DirectionDownIcon className="!w-2.5" />
               </DropdownMenu.Trigger>
-              {/* TODO: fix hover style + should be able to click anywhere in the menu item */}
               <DropdownMenu.Content gap={8}>
                 <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
                 <DropdownMenu.Item onSelect={() => logout.mutate({})}>

From 5c5cdd1150e01a09592740af8a8e0fb8cd14eda3 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 18 Sep 2024 10:36:15 -0500
Subject: [PATCH 8/9] use z-popover (10) on menu contents and add
 z-topBarPopover (25)

---
 app/components/TopBar.tsx                | 2 +-
 app/components/TopBarPicker.tsx          | 2 +-
 app/ui/styles/components/menu-button.css | 2 +-
 tailwind.config.js                       | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index a9024161ca..8c33db531e 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -55,7 +55,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                 </span>
                 <DirectionDownIcon className="!w-2.5" />
               </DropdownMenu.Trigger>
-              <DropdownMenu.Content gap={8}>
+              <DropdownMenu.Content gap={8} className="!z-topBarPopover">
                 <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
                 <DropdownMenu.Item onSelect={() => logout.mutate({})}>
                   Sign out
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 346956ebd3..9e3c51599e 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -111,7 +111,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
       {/* TODO: popover position should be further right */}
       {props.items && (
         <DropdownMenu.Content
-          className="mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
+          className="!z-topBarPopover mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
           anchor="bottom start"
         >
           {props.items.length > 0 ? (
diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index f3429ff1ed..2a88a87233 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -7,7 +7,7 @@
  */
 
 .DropdownMenuContent {
-  @apply z-30 min-w-36 rounded border p-0 bg-raise border-secondary;
+  @apply z-popover min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {
     @apply block w-full cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
diff --git a/tailwind.config.js b/tailwind.config.js
index 17b8108be9..be83d8b78e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,6 +48,7 @@ module.exports = {
         modal: '40',
         sideModalDropdown: '40',
         sideModal: '30',
+        topBarPopover: '25',
         topBar: '20',
         popover: '10',
         contentDropdown: '10',

From cd97cfe9a4415d995a2ad6f78fb484e50ac81969 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 18 Sep 2024 12:28:33 -0500
Subject: [PATCH 9/9] remove unused portal prop and remove an unnecessary
 anchor prop

---
 app/components/MoreActionsMenu.tsx |  2 +-
 app/ui/lib/DropdownMenu.tsx        | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index 74b643bdf9..43a8ebcedc 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -26,7 +26,7 @@ export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
       >
         <More12Icon className="text-tertiary" />
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content anchor="bottom end" className="mt-2">
+      <DropdownMenu.Content className="mt-2">
         {actions.map((a) => (
           <Wrap key={a.label} when={!!a.disabled} with={<Tooltip content={a.disabled} />}>
             <DropdownMenu.Item
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index a49234ff45..804e448bc7 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -25,18 +25,11 @@ type ContentProps = {
   className?: string
   children: ReactNode
   anchor?: MenuItemsProps['anchor']
-  portal?: boolean
   /** Spacing in px, passed as --anchor-gap */
   gap?: 8
 }
 
-export function Content({
-  className,
-  children,
-  portal,
-  anchor = 'bottom end',
-  gap,
-}: ContentProps) {
+export function Content({ className, children, anchor = 'bottom end', gap }: ContentProps) {
   return (
     <MenuItems
       anchor={anchor}
@@ -45,7 +38,6 @@ export function Content({
       // necessary to turn off scroll locking so the scrollbar doesn't pop in
       // and out as menu closes and opens
       modal={false}
-      portal={portal}
     >
       {children}
     </MenuItems>