diff --git a/.changeset/mean-steaks-jog.md b/.changeset/mean-steaks-jog.md new file mode 100644 index 0000000000..2853534833 --- /dev/null +++ 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 index bc1853b9fc..7ce1afada7 100644 --- 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 = { + 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, }, ]);