From 725412ebd337c18179a52d968d3b0d29eb9c2fa4 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 20 Oct 2025 20:56:55 +1100
Subject: [PATCH] fix: context menu getting covered (#10199)

* do not show z-index actions on mobile or tablet

* fix: context menu getting covered

* fix lint

* fix style popup getting covered

* put contextmenu z-index above sidebar

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/excalidraw/components/App.tsx          | 17 ++++++++++++-----
 packages/excalidraw/components/ContextMenu.scss |  4 ++++
 packages/excalidraw/components/ContextMenu.tsx  |  1 +
 packages/excalidraw/components/Popover.tsx      |  6 +++++-
 packages/excalidraw/css/styles.scss             |  3 ++-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 19a5e00188..6b04b8b00e 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -11204,6 +11204,17 @@ class App extends React.Component<AppProps, AppState> {
       return [actionCopy, ...options];
     }
 
+    const zIndexActions: ContextMenuItems =
+      this.state.stylesPanelMode === "full"
+        ? [
+            CONTEXT_MENU_SEPARATOR,
+            actionSendBackward,
+            actionBringForward,
+            actionSendToBack,
+            actionBringToFront,
+          ]
+        : [];
+
     return [
       CONTEXT_MENU_SEPARATOR,
       actionCut,
@@ -11229,11 +11240,7 @@ class App extends React.Component<AppProps, AppState> {
       actionUngroup,
       CONTEXT_MENU_SEPARATOR,
       actionAddToLibrary,
-      CONTEXT_MENU_SEPARATOR,
-      actionSendBackward,
-      actionBringForward,
-      actionSendToBack,
-      actionBringToFront,
+      ...zIndexActions,
       CONTEXT_MENU_SEPARATOR,
       actionFlipHorizontal,
       actionFlipVertical,
diff --git a/packages/excalidraw/components/ContextMenu.scss b/packages/excalidraw/components/ContextMenu.scss
index 3bedf2ba7a..0b370d919b 100644
--- a/packages/excalidraw/components/ContextMenu.scss
+++ b/packages/excalidraw/components/ContextMenu.scss
@@ -1,6 +1,10 @@
 @import "../css/variables.module.scss";
 
 .excalidraw {
+  .context-menu-popover {
+    z-index: var(--zIndex-ui-context-menu);
+  }
+
   .context-menu {
     position: relative;
     border-radius: 4px;
diff --git a/packages/excalidraw/components/ContextMenu.tsx b/packages/excalidraw/components/ContextMenu.tsx
index 3295d1d099..4cef2bb177 100644
--- a/packages/excalidraw/components/ContextMenu.tsx
+++ b/packages/excalidraw/components/ContextMenu.tsx
@@ -64,6 +64,7 @@ export const ContextMenu = React.memo(
         offsetTop={appState.offsetTop}
         viewportWidth={appState.width}
         viewportHeight={appState.height}
+        className="context-menu-popover"
       >
         <ul
           className="context-menu"
diff --git a/packages/excalidraw/components/Popover.tsx b/packages/excalidraw/components/Popover.tsx
index 4864b37d16..d8ee76aa62 100644
--- a/packages/excalidraw/components/Popover.tsx
+++ b/packages/excalidraw/components/Popover.tsx
@@ -3,6 +3,8 @@ import { unstable_batchedUpdates } from "react-dom";
 
 import { KEYS, queryFocusableElements } from "@excalidraw/common";
 
+import clsx from "clsx";
+
 import "./Popover.scss";
 
 type Props = {
@@ -15,6 +17,7 @@ type Props = {
   offsetTop?: number;
   viewportWidth?: number;
   viewportHeight?: number;
+  className?: string;
 };
 
 export const Popover = ({
@@ -27,6 +30,7 @@ export const Popover = ({
   offsetTop = 0,
   viewportWidth = window.innerWidth,
   viewportHeight = window.innerHeight,
+  className,
 }: Props) => {
   const popoverRef = useRef<HTMLDivElement>(null);
 
@@ -146,7 +150,7 @@ export const Popover = ({
   }, [onCloseRequest]);
 
   return (
-    <div className="popover" ref={popoverRef} tabIndex={-1}>
+    <div className={clsx("popover", className)} ref={popoverRef} tabIndex={-1}>
       {children}
     </div>
   );
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 72890f206d..c5b2e12550 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -12,9 +12,10 @@
   --zIndex-eyeDropperPreview: 6;
   --zIndex-hyperlinkContainer: 7;
 
-  --zIndex-ui-styles-popup: 40;
   --zIndex-ui-bottom: 60;
   --zIndex-ui-library: 80;
+  --zIndex-ui-context-menu: 90;
+  --zIndex-ui-styles-popup: 100;
   --zIndex-ui-top: 100;
 
   --zIndex-modal: 1000;