From 3a442ec5d345165d2ebc8bf5ebd9a49191bec5d5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Tue, 2 Jun 2026 22:11:24 -0400
Subject: [PATCH] closes #12552 (#12565)

---
 app/components/Menu/DropdownMenu.tsx | 9 ++++++++-
 app/menus/CommentMenu.tsx            | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/Menu/DropdownMenu.tsx b/app/components/Menu/DropdownMenu.tsx
index 11278004e9..bf2c6572a7 100644
--- a/app/components/Menu/DropdownMenu.tsx
+++ b/app/components/Menu/DropdownMenu.tsx
@@ -33,6 +33,12 @@ type Props = {
   align?: "start" | "end";
   /** ARIA label for the menu */
   ariaLabel: string;
+  /**
+   * Whether the menu should lock page scroll and trap focus while open.
+   * Defaults to true. Set to false to avoid the scrollbar-removal layout
+   * shift when the menu lives inside a scrollable container.
+   */
+  modal?: boolean;
   /** Additional component to display at the bottom of the top-level menu */
   append?: React.ReactNode;
   /** Callback when menu is opened */
@@ -50,6 +56,7 @@ export const DropdownMenu = observer(
         children,
         align = "start",
         ariaLabel,
+        modal = true,
         append,
         onOpen,
         onClose,
@@ -116,7 +123,7 @@ export const DropdownMenu = observer(
 
       return (
         <MenuProvider variant="dropdown">
-          <Menu open={open} onOpenChange={handleOpenChange}>
+          <Menu open={open} onOpenChange={handleOpenChange} modal={modal}>
             <MenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
               {children}
             </MenuTrigger>
diff --git a/app/menus/CommentMenu.tsx b/app/menus/CommentMenu.tsx
index b993bd2ae7..80fbaf2b35 100644
--- a/app/menus/CommentMenu.tsx
+++ b/app/menus/CommentMenu.tsx
@@ -91,6 +91,7 @@ function CommentMenu({
       action={rootAction}
       align="end"
       ariaLabel={t("Comment options")}
+      modal={false}
     >
       <OverflowMenuButton className={className} />
     </DropdownMenu>