etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 03:36:42 +03:00
parent 2d8a0bd63a
commit 1a642bb7d4
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ConnectionModal.tsx
View File

@@ -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}

12
src/components/TopUpModal.tsx
View File

@@ -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 */}