Date: Wed, 5 Aug 2026 10:32:54 -0400
Subject: [PATCH 12/13] refactor: update WalletConnectDialog styles and class
usage
- Removed the dialogOverlay class and replaced it with aboveWidgets for improved z-index management.
- Updated the WalletConnectDialog component to reflect the new class structure, ensuring proper overlay behavior.
---
.../WalletConnectDialog.module.css | 11 +----------
.../WalletConnectDialog/WalletConnectDialog.tsx | 2 +-
2 files changed, 2 insertions(+), 11 deletions(-)
diff --git a/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.module.css b/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.module.css
index 71333eb..a3260bd 100644
--- a/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.module.css
+++ b/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.module.css
@@ -1,14 +1,5 @@
-.dialogOverlay {
- width: 100%;
- height: 100%;
- background-color: var(--token-bg-overlay);
- position: fixed;
- inset: 0;
+.aboveWidgets {
z-index: 1100;
- display: flex;
- align-items: center;
- justify-content: center;
- max-width: none;
}
.dialogContainer {
diff --git a/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx b/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx
index 9314b96..8a75c70 100644
--- a/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx
+++ b/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx
@@ -53,7 +53,7 @@ export const WalletConnectDialog = () => {
return createPortal(
{
updateWalletConnectDialogStatus("rejected")
e.stopPropagation()
From 69a8cebb3bee559516959fbf841a0fc2d9b1b1b6 Mon Sep 17 00:00:00 2001
From: blueogin
Date: Wed, 5 Aug 2026 10:37:09 -0400
Subject: [PATCH 13/13] refactor: simplify WalletConnectDialog overflow
management
- Removed the dependency on status for managing document body overflow.
- Ensured overflow is set to "hidden" when the dialog is mounted and reset to "auto" on unmount.
- Streamlined class name handling in the dialog container for improved readability.
---
.../WalletConnectDialog/WalletConnectDialog.tsx | 10 +++-------
1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx b/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx
index 8a75c70..27dfe72 100644
--- a/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx
+++ b/src/sections/WalletConnect/components/WalletConnectDialog/WalletConnectDialog.tsx
@@ -41,13 +41,11 @@ export const WalletConnectDialog = () => {
}, [])
useEffect(() => {
- if (status !== "pending") return
- const previousOverflow = document.body.style.overflow
document.body.style.overflow = "hidden"
return () => {
- document.body.style.overflow = previousOverflow
+ document.body.style.overflow = "auto"
}
- }, [status])
+ }, [])
if (!mounted || status !== "pending") return null
@@ -63,9 +61,7 @@ export const WalletConnectDialog = () => {
className={[
dialogStyles.dialogContainer,
exiting && dialogStyles.dialogContainerExiting,
- ]
- .filter(Boolean)
- .join(" ")}
+ ].join(" ")}
onClick={(e) => e.stopPropagation()}
>
{renderDialog(dialog as WalletConnectDialogType)}