fix: increase z-index of modal (#201)

rainbow-me · Mar 29, 2022 · 8d0025a · 8d0025a · vercel · Mar 29, 2022
1 parent 24ff68f
commit 8d0025a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/mean-steaks-jog.md b/.changeset/mean-steaks-jog.md
@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Increase z-index of modal to `2147483646` (Coinbase modal z-index minus 1) to ensure RainbowKit renders on top of other elements.
diff --git a/packages/rainbowkit/src/components/Dialog/Dialog.css.ts b/packages/rainbowkit/src/components/Dialog/Dialog.css.ts
@@ -11,6 +11,11 @@ const fadeIn = keyframes({
   '100%': { opacity: 1 },
 });
 
+const nestedModalZIndexes: Record<string, number> = {
+  coinbase: 2147483647,
+  walletConnect: 99999999999999,
+};
+
 const bleed = 200;
 export const overlay = style([
   sprinkles({
@@ -31,6 +36,7 @@ export const overlay = style([
     right: -bleed,
     top: -bleed,
     transform: 'translateZ(0)', // This is required for content to render under the URL bar on iOS
+    zIndex: Math.min(...Object.values(nestedModalZIndexes)) - 1,
   },
 ]);