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

@@ -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,

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;

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"

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>
   );

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;