fix bg color picker rendered behind shape menu (#1445)

* fix bg color picker rendered behind shape menu

* add comment

src/components/Island.css

@@ -5,4 +5,5 @@
   box-shadow: var(--shadow-island);
   border-radius: var(--border-radius-m);
   padding: calc(var(--padding) * var(--space-factor));
+  position: relative;
 }

src/components/Island.tsx

@@ -6,13 +6,14 @@ type IslandProps = {
   children: React.ReactNode;
   padding?: number;
   className?: string;
+  style?: object;
 };
 
 export const Island = React.forwardRef<HTMLDivElement, IslandProps>(
-  ({ children, padding, className }, ref) => (
+  ({ children, padding, className, style }, ref) => (
     <div
       className={`${className ?? ""} Island`}
-      style={{ "--padding": padding } as React.CSSProperties}
+      style={{ "--padding": padding, ...style } as React.CSSProperties}
       ref={ref}
     >
       {children}

src/components/LayerUI.tsx

@@ -125,7 +125,9 @@ export const LayerUI = React.memo(
           <div className="App-menu App-menu_top">
             <Stack.Col gap={4}>
               <Section heading="canvasActions">
-                <Island padding={4}>
+                {/* the zIndex ensures this menu has higher stacking order,
+                     see https://github.com/excalidraw/excalidraw/pull/1445 */}
+                <Island padding={4} style={{ zIndex: 1 }}>
                   <Stack.Col gap={4}>
                     <Stack.Row gap={1} justifyContent={"space-between"}>
                       {actionManager.renderAction("loadScene")}