From f44473a7aa2ff7e3fee03dd7caf365725903f46b Mon Sep 17 00:00:00 2001
From: Felix Habib <33821218+felixhabib@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:18:04 +1100
Subject: [PATCH] MenuRenderer, OverflowMenu: Ensure menus work in Modal
 components (#1665)

---
 .changeset/tender-olives-sell.md                      | 11 +++++++++++
 .../src/lib/components/MenuRenderer/MenuRenderer.tsx  |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tender-olives-sell.md

diff --git a/.changeset/tender-olives-sell.md b/.changeset/tender-olives-sell.md
new file mode 100644
index 00000000000..79b9318ee5e
--- /dev/null
+++ b/.changeset/tender-olives-sell.md
@@ -0,0 +1,11 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - MenuRenderer
+  - OverflowMenu
+---
+
+**MenuRenderer, OverflowMenu:** Fixes a bug where menus could be obscured when rendered inside a `Dialog` or `Drawer` component.
diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
index 8fd57fec367..17adb7412be 100644
--- a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
+++ b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
@@ -363,7 +363,7 @@ export const MenuRenderer = ({
               dispatch({ type: BACKDROP_CLICK });
             }}
             position="fixed"
-            zIndex="dropdownBackdrop"
+            zIndex="modal"
             top={0}
             left={0}
             className={styles.backdrop}
@@ -423,7 +423,7 @@ export function Menu({
       <Box
         role="menu"
         position={position}
-        zIndex="dropdown"
+        zIndex="modal"
         boxShadow={placement === 'top' ? 'small' : 'medium'}
         borderRadius={borderRadius}
         background="surface"