From 023a1d2ce71469ca37d795b39e2cbb7c9a2696b6 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 03:30:22 +0300
Subject: [PATCH] Refactor ConnectionModal and TopUpModal: reintroduce app
 selector logic in ConnectionModal, implement body scroll locking in
 TopUpModal, and adjust modal styling for improved responsiveness and user
 experience.

---
 src/components/ConnectionModal.tsx | 26 +++++++++++++-------------
 src/components/TopUpModal.tsx      | 25 ++++++++++++++++++-------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index 9b78a57..dae275c 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -267,6 +267,19 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     return available
   }, [appConfig, detectedPlatform])
 
+  // Get all apps for selector (must be before any conditional returns)
+  const allAppsForSelector = useMemo(() => {
+    if (!appConfig?.platforms) return []
+    const result: { platform: string; apps: AppInfo[] }[] = []
+    for (const platform of availablePlatforms) {
+      const apps = appConfig.platforms[platform]
+      if (apps?.length) {
+        result.push({ platform, apps })
+      }
+    }
+    return result
+  }, [appConfig, availablePlatforms])
+
   const copySubscriptionLink = async () => {
     if (!appConfig?.subscriptionUrl) return
     try {
@@ -371,19 +384,6 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     )
   }
 
-  // Get all apps for selector
-  const allAppsForSelector = useMemo(() => {
-    if (!appConfig?.platforms) return []
-    const result: { platform: string; apps: AppInfo[] }[] = []
-    for (const platform of availablePlatforms) {
-      const apps = appConfig.platforms[platform]
-      if (apps?.length) {
-        result.push({ platform, apps })
-      }
-    }
-    return result
-  }, [appConfig, availablePlatforms])
-
   // App selector view
   if (showAppSelector || !selectedApp) {
     return (
diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index 7d62d10..7aed26b 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useMutation } from '@tanstack/react-query'
 import { balanceApi } from '../api/balance'
@@ -55,6 +55,15 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
   )
   const popupRef = useRef<Window | null>(null)
 
+  // Scroll lock when modal is open
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = originalOverflow
+    }
+  }, [])
+
   const hasOptions = method.options && method.options.length > 0
   const minRubles = method.min_amount_kopeks / 100
   const maxRubles = method.max_amount_kopeks / 100
@@ -134,15 +143,17 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
 
   return (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center p-4"
+      className="fixed inset-0 bg-black/70 z-[60] flex items-start sm:items-center justify-center p-4 overflow-y-auto"
       style={{
-        paddingTop: 'calc(1rem + env(safe-area-inset-top, 0px))',
-        paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px))',
+        paddingTop: 'calc(2rem + env(safe-area-inset-top, 0px))',
+        paddingBottom: 'calc(6rem + env(safe-area-inset-bottom, 0px))',
       }}
+      onClick={onClose}
     >
-      <div className="absolute inset-0" onClick={onClose} />
-
-      <div className="relative w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in">
+      <div
+        className="relative w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
           <span className="font-semibold text-dark-100">{methodName}</span>