Merge pull request #55 from BEDOLAGA-DEV/dev

Add files via upload

src/components/ConnectionModal.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
 import { subscriptionApi } from '../api/subscription'
@@ -133,7 +134,6 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
   const isMobileScreen = useIsMobile()
   const isMobile = isMobileScreen || isTelegramWebApp
 
-  const safeTop = isTelegramWebApp ? Math.max(safeAreaInset.top, contentSafeAreaInset.top) : 0
   const safeBottom = isTelegramWebApp ? Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom) : 0
 
   const { data: appConfig, isLoading, error } = useQuery<AppConfig>({
@@ -216,15 +216,16 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
   )
 
   // Mobile fullscreen wrapper - like React Native Modal with animationType="slide"
-  const MobileWrapper = ({ children }: { children: React.ReactNode }) => (
+  // Use portal to render directly in body, avoiding transform/filter issues with fixed positioning
+  const MobileWrapper = ({ children }: { children: React.ReactNode }) => {
+    const content = (
       <>
         {/* Backdrop */}
         <div className="fixed inset-0 z-[9998] bg-black/50 animate-fade-in" onClick={onClose} />
-      {/* Modal - slides from bottom */}
+        {/* Modal - fullscreen overlay */}
         <div
           className="fixed inset-0 z-[9999] bg-dark-900 flex flex-col animate-slide-up"
           style={{
-          paddingTop: safeTop ? `${safeTop}px` : 'env(safe-area-inset-top, 0px)',
             paddingBottom: safeBottom ? `${safeBottom}px` : 'env(safe-area-inset-bottom, 0px)'
           }}
         >
@@ -232,7 +233,6 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
           <button
             onClick={onClose}
             className="absolute top-4 right-4 z-10 p-2.5 rounded-full bg-dark-800/80 text-dark-200 active:bg-dark-700"
-          style={{ marginTop: safeTop ? `${safeTop}px` : 'env(safe-area-inset-top, 0px)' }}
           >
             <CloseIcon />
           </button>
@@ -241,6 +241,12 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
       </>
     )
     
+    if (typeof document !== 'undefined') {
+      return createPortal(content, document.body)
+    }
+    return content
+  }
+
   const Wrapper = isMobile ? MobileWrapper : DesktopWrapper
 
   // Loading

src/components/TopUpModal.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useMutation } from '@tanstack/react-query'
 import { balanceApi } from '../api/balance'
@@ -169,11 +170,10 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     return () => clearTimeout(timer)
   }, [])
 
-  return (
+  const modalContent = (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center p-4 pt-8 overflow-hidden"
+      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center p-4 pt-4 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}
@@ -279,4 +279,9 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
       </div>
     </div>
   )
+
+  if (typeof document !== 'undefined') {
+    return createPortal(modalContent, document.body)
+  }
+  return modalContent
 }