etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update styling in ConnectionModal and TopUpModal: enhance layout with consistent padding and improved responsiveness for mobile devices, ensuring better compatibility with safe area insets.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 04:00:41 +03:00
parent a76803f4ea
commit 2522d438ae
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ConnectionModal.tsx
View File

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

10
src/components/TopUpModal.tsx
View File

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