From 8cfc64a3ab85d1cd4c1ebeabf13ae3d793f9e5c2 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Thu, 16 Apr 2020 21:31:20 +0200
Subject: [PATCH] fix bg color picker rendered behind shape menu (#1445)

* fix bg color picker rendered behind shape menu

* add comment
---
 src/components/Island.css  | 1 +
 src/components/Island.tsx  | 5 +++--
 src/components/LayerUI.tsx | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Island.css b/src/components/Island.css
index cea8c533a..bca91f08e 100644
--- a/src/components/Island.css
+++ b/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;
 }
diff --git a/src/components/Island.tsx b/src/components/Island.tsx
index c4ef6ebc4..08ae1c897 100644
--- a/src/components/Island.tsx
+++ b/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}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 114e7139b..64c18b30c 100644
--- a/src/components/LayerUI.tsx
+++ b/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")}