From a82e809a34f83773f25dc286b5bdd3523083c90d Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 03:39:10 +0300
Subject: [PATCH] Refactor modal components: update ConnectionModal and
 TopUpModal to improve layout with top alignment and auto-focus functionality,
 enhancing user experience on mobile devices.

---
 src/components/ConnectionModal.tsx | 13 +++++++------
 src/components/TopUpModal.tsx      | 15 ++++++++++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index e79d9a4..082663d 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -339,18 +339,19 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     window.location.href = redirectUrl
   }
 
-  // Modal wrapper - centered on all devices
+  // Modal wrapper - top aligned with auto-focus
   const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center"
+      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center pt-8 sm:pt-12"
+      style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
       onClick={onClose}
     >
       <div
-        className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-hidden animate-scale-in shadow-2xl flex flex-col"
+        ref={(el) => el?.focus()}
+        tabIndex={-1}
+        className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-hidden animate-scale-in shadow-2xl flex flex-col outline-none"
         style={{
-          maxHeight: 'calc(100dvh - 4rem)',
-          marginTop: 'env(safe-area-inset-top, 0px)',
-          marginBottom: 'env(safe-area-inset-bottom, 0px)',
+          maxHeight: 'calc(100dvh - 6rem)',
         }}
         onClick={(e) => e.stopPropagation()}
       >
diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index 4333c3e..dda3800 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -164,17 +164,22 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     : convertAmount(rub).toFixed(currencyDecimals)
   const isPending = topUpMutation.isPending || starsPaymentMutation.isPending
 
+  // Auto-focus input on mount
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      inputRef.current?.focus()
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [])
+
   return (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center"
+      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center"
+      style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
       onClick={onClose}
     >
       <div
         className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
-        style={{
-          marginTop: 'env(safe-area-inset-top, 0px)',
-          marginBottom: 'env(safe-area-inset-bottom, 0px)',
-        }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}