From cfbfa557da61444a015908fb600958dc6cb7b6f2 Mon Sep 17 00:00:00 2001
From: Matt Anderson <matta9001@gmail.com>
Date: Sat, 19 Jul 2025 14:41:52 -0500
Subject: [PATCH] ensure unconfirmed transaction modal is placed above other UI
 elements and avoid stacking context issues by rendering the modal at the
 document root

---
 .../components/Modal/UnconfirmedTxModal.tsx                 | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/relay-dashboard/unconfirmed-transactions/components/Modal/UnconfirmedTxModal.tsx b/src/components/relay-dashboard/unconfirmed-transactions/components/Modal/UnconfirmedTxModal.tsx
index 29be8384..09404cf9 100644
--- a/src/components/relay-dashboard/unconfirmed-transactions/components/Modal/UnconfirmedTxModal.tsx
+++ b/src/components/relay-dashboard/unconfirmed-transactions/components/Modal/UnconfirmedTxModal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import * as S from './UnconfirmedTxModal.styles';
 import UnconfirmedTransactions from '../../UnconfirmedTransactions';
 
@@ -8,10 +9,11 @@ interface UnconfirmedTxModalProps {
 }
 
 const UnconfirmedTxModal: React.FC<UnconfirmedTxModalProps> = ({ isOpen, onOpenChange }) => {
-  return (
+  return ReactDOM.createPortal(
     <S.Modal open={isOpen} centered={true} onCancel={onOpenChange} footer={null} destroyOnClose>
       <UnconfirmedTransactions />
-    </S.Modal>
+    </S.Modal>,
+    document.body
   );
 };