From 1a642bb7d42fa004e10ae1b76cce42b3e65227ce Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 03:36:42 +0300
Subject: [PATCH] Refactor modal components: update styling in ConnectionModal
 and TopUpModal for improved responsiveness, including adjustments to padding
 and margins for better compatibility with safe area insets on mobile devices.

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

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index 21ac366..e79d9a4 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -342,16 +342,16 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
   // Modal wrapper - centered on all devices
   const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center p-4"
-      style={{
-        paddingTop: 'calc(1rem + env(safe-area-inset-top, 0px))',
-        paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px))',
-      }}
+      className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center"
       onClick={onClose}
     >
       <div
-        className="w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-hidden animate-scale-in shadow-2xl"
-        style={{ maxHeight: 'calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))' }}
+        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"
+        style={{
+          maxHeight: 'calc(100dvh - 4rem)',
+          marginTop: 'env(safe-area-inset-top, 0px)',
+          marginBottom: 'env(safe-area-inset-bottom, 0px)',
+        }}
         onClick={(e) => e.stopPropagation()}
       >
         {children}
diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index 1a8d193..4333c3e 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -166,15 +166,15 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
 
   return (
     <div
-      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(2rem + env(safe-area-inset-top, 0px))',
-        paddingBottom: 'calc(6rem + env(safe-area-inset-bottom, 0px))',
-      }}
+      className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center"
       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"
+        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 */}