fix: overlay issue with confirm modal

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;
 }

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>
   );
 };