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

@@ -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 scrollY = window.scrollY
-    const originalOverflow = document.body.style.overflow
+    const body = document.body
-    document.body.style.overflow = 'hidden'
+    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)
     }
   }, [])
 

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
+    const scrollY = window.scrollY
-    document.body.style.overflow = 'hidden'
+    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)
     }
   }, [])