From 31681a499db8e241e1225bbd214de922498e2806 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Tue, 11 Jan 2022 10:15:27 +0200
Subject: [PATCH] fix: overlay issue with confirm modal

---
 .../ConfirmModal/ConfirmModal.module.css      | 92 ++++++++++---------
 .../components/ConfirmModal/ConfirmModal.tsx  | 47 +++++-----
 2 files changed, 72 insertions(+), 67 deletions(-)

diff --git a/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css b/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
index a9b8c894..3d44a79a 100644
--- a/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
+++ b/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
@@ -1,70 +1,72 @@
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fadeOut {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 .overlay[data-state='open'],
 .contentWrapper[data-state='open'] {
-    animation: fadeIn 150ms ease-out;
+  animation: fadeIn 150ms ease-out;
 }
 
 .overlay[data-state='closed'],
 .contentWrapper[data-state='closed'] {
-    animation: fadeOut 150ms ease-in;
+  animation: fadeOut 150ms ease-in;
 }
 
 .overlay {
-    position: fixed;
-    top: 0!important;
-    left: 0!important;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    vertical-align: middle;
-    padding: 1em;
-    background-color: rgba(0,0,0,.85);
-    user-select: none;
-    will-change: opacity;
+  position: fixed;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.85);
+  user-select: none;
+  will-change: opacity;
+  z-index: 1000;
 }
 
 .contentWrapper {
-    padding: 1rem;
-    position: fixed;
-    top: 0!important;
-    left: 0!important;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  padding: 1rem;
+  position: fixed;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1100;
 }
 
 .content {
-    max-width: 450px;
-    width: 100%;
-    background-color: white;
-    border-radius: 0.5rem;
-    padding: 1rem;
+  max-width: 450px;
+  width: 100%;
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 1rem;
 }
 
 .actions {
-    background: #f9fafb;
-    margin: 1rem -1rem -1rem;
-    border-radius: 0 0 0.5rem 0.5rem;
-    padding: 1rem 1rem;
-    text-align: right;
+  background: #f9fafb;
+  margin: 1rem -1rem -1rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+  padding: 1rem 1rem;
+  text-align: right;
 }
diff --git a/packages/ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/ui/src/components/ConfirmModal/ConfirmModal.tsx
index 50449dfc..b60c88d2 100644
--- a/packages/ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -6,6 +6,7 @@ import {
   Overlay,
   Root,
   Title,
+  Portal,
 } from '@radix-ui/react-alert-dialog';
 import React from 'react';
 import s from './ConfirmModal.module.css';
@@ -28,29 +29,31 @@ export const ConfirmModal = (props: ConfirmProps) => {
 
   return (
     <Root open={props.open} onOpenChange={closeOnOpenChange}>
-      <Overlay className={s.overlay} />
-      <Content className={s.contentWrapper}>
-        <div className={s.content}>
-          {!!props.title && (
-            <Title asChild>
-              <h3>{props.title}</h3>
-            </Title>
-          )}
-          {!!props.description && <Description>{props.description}</Description>}
-          <div className={s.actions}>
-            <Action asChild>
-              <Button theme="primary" onClick={props.onConfirm}>
-                Confirm
-              </Button>
-            </Action>
-            <Cancel asChild>
-              <Button theme="basic" onClick={props.onCancel}>
-                Cancel
-              </Button>
-            </Cancel>
+      <Portal>
+        <Overlay className={s.overlay} />
+        <Content className={s.contentWrapper}>
+          <div className={s.content}>
+            {!!props.title && (
+              <Title asChild>
+                <h3>{props.title}</h3>
+              </Title>
+            )}
+            {!!props.description && <Description>{props.description}</Description>}
+            <div className={s.actions}>
+              <Action asChild>
+                <Button theme="primary" onClick={props.onConfirm}>
+                  Confirm
+                </Button>
+              </Action>
+              <Cancel asChild>
+                <Button theme="basic" onClick={props.onCancel}>
+                  Cancel
+                </Button>
+              </Cancel>
+            </div>
           </div>
-        </div>
-      </Content>
+        </Content>
+      </Portal>
     </Root>
   );
 };