From 2522d438aea39df5348a3273233e94d943f23af9 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 04:00:41 +0300
Subject: [PATCH] Update styling in ConnectionModal and TopUpModal: enhance
 layout with consistent padding and improved responsiveness for mobile
 devices, ensuring better compatibility with safe area insets.

---
 src/components/ConnectionModal.tsx | 12 +++++++-----
 src/components/TopUpModal.tsx      | 10 ++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index f47e64d..c9826da 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -345,19 +345,21 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
   // 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-start justify-center"
-      style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
+      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center p-4 pt-8 overflow-hidden"
+      style={{
+        paddingTop: `max(2rem, calc(1rem + env(safe-area-inset-top, 0px)))`,
+        paddingBottom: `max(1rem, env(safe-area-inset-bottom, 0px))`,
+      }}
       onClick={onClose}
     >
       <div
         ref={modalContentRef}
         data-modal-content
         tabIndex={-1}
-        className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-y-auto overscroll-contain animate-scale-in shadow-2xl flex flex-col outline-none"
+        className="w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-y-auto overscroll-contain animate-scale-in shadow-2xl flex flex-col outline-none"
         style={{
-          maxHeight: 'calc(100dvh - 6rem)',
+          maxHeight: `calc(100vh - 4rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))`,
           WebkitOverflowScrolling: 'touch',
-          touchAction: 'pan-y',
         }}
         onClick={(e) => e.stopPropagation()}
       >
diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index d419365..bbcacdc 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -171,14 +171,16 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
 
   return (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center"
-      style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
+      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center p-4 pt-8 overflow-hidden"
+      style={{
+        paddingTop: `max(2rem, calc(1rem + env(safe-area-inset-top, 0px)))`,
+        paddingBottom: `max(1rem, env(safe-area-inset-bottom, 0px))`,
+      }}
       onClick={onClose}
     >
       <div
         data-modal-content
-        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={{ touchAction: 'pan-y' }}
+        className="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 */}