From 4c821a0f555760a8358e61da423ff20011312323 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 03:33:45 +0300
Subject: [PATCH] Refactor scroll locking in ConnectionModal and TopUpModal:
 enhance cross-platform compatibility by saving and restoring original body
 and HTML styles, ensuring consistent user experience when modals are open.

---
 src/components/ConnectionModal.tsx | 31 +++++++++++++++++++++++++-----
 src/components/TopUpModal.tsx      | 31 ++++++++++++++++++++++++++----
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index dae275c..21ac366 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -231,14 +231,35 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     }
   }, [appConfig, detectedPlatform, selectedApp])
 
-  // Prevent body scroll when modal is open
+  // Scroll lock when modal is open (cross-platform)
   useEffect(() => {
-    // Simple overflow hidden - let the modal handle its own scrolling
-    const originalOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
+    const scrollY = window.scrollY
+    const body = document.body
+    const html = document.documentElement
+
+    // Save original styles
+    const originalStyles = {
+      bodyOverflow: body.style.overflow,
+      bodyPosition: body.style.position,
+      bodyTop: body.style.top,
+      bodyWidth: body.style.width,
+      htmlOverflow: html.style.overflow,
+    }
+
+    // Lock scroll
+    body.style.overflow = 'hidden'
+    body.style.position = 'fixed'
+    body.style.top = `-${scrollY}px`
+    body.style.width = '100%'
+    html.style.overflow = 'hidden'
 
     return () => {
-      document.body.style.overflow = originalOverflow
+      body.style.overflow = originalStyles.bodyOverflow
+      body.style.position = originalStyles.bodyPosition
+      body.style.top = originalStyles.bodyTop
+      body.style.width = originalStyles.bodyWidth
+      html.style.overflow = originalStyles.htmlOverflow
+      window.scrollTo(0, scrollY)
     }
   }, [])
 
diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index 7aed26b..1a8d193 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -55,12 +55,35 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
   )
   const popupRef = useRef<Window | null>(null)
 
-  // Scroll lock when modal is open
+  // Scroll lock when modal is open (cross-platform)
   useEffect(() => {
-    const originalOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
+    const scrollY = window.scrollY
+    const body = document.body
+    const html = document.documentElement
+
+    // Save original styles
+    const originalStyles = {
+      bodyOverflow: body.style.overflow,
+      bodyPosition: body.style.position,
+      bodyTop: body.style.top,
+      bodyWidth: body.style.width,
+      htmlOverflow: html.style.overflow,
+    }
+
+    // Lock scroll
+    body.style.overflow = 'hidden'
+    body.style.position = 'fixed'
+    body.style.top = `-${scrollY}px`
+    body.style.width = '100%'
+    html.style.overflow = 'hidden'
+
     return () => {
-      document.body.style.overflow = originalOverflow
+      body.style.overflow = originalStyles.bodyOverflow
+      body.style.position = originalStyles.bodyPosition
+      body.style.top = originalStyles.bodyTop
+      body.style.width = originalStyles.bodyWidth
+      html.style.overflow = originalStyles.htmlOverflow
+      window.scrollTo(0, scrollY)
     }
   }, [])