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

Enhance ConnectionModal component: implement body scroll locking when the modal is open, and adjust modal wrapper styling for better alignment on mobile and desktop devices.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 02:45:54 +03:00
parent fc10fad1c4
commit 075f03e46a
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ConnectionModal.tsx
View File

@@ -149,6 +149,15 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
setDetectedPlatform(detectPlatform()) setDetectedPlatform(detectPlatform())
}, []) }, [])
// Lock body scroll when modal is open
useEffect(() => {
const originalStyle = window.getComputedStyle(document.body).overflow
document.body.style.overflow = 'hidden'
return () => {
document.body.style.overflow = originalStyle
}
}, [])
const getLocalizedText = (text: LocalizedText | undefined): string => { const getLocalizedText = (text: LocalizedText | undefined): string => {
if (!text) return '' if (!text) return ''
const lang = i18n.language || 'en' const lang = i18n.language || 'en'
@@ -217,11 +226,15 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
window.location.href = redirectUrl window.location.href = redirectUrl
} }
// Modal wrapper - centered on all devices // Modal wrapper - centered on desktop, top on mobile
const ModalWrapper = ({ children }: { children: React.ReactNode }) => ( const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
<div <div
className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" className="fixed inset-0 bg-black/70 z-50 flex items-start sm:items-center justify-center overflow-y-auto"
style={{ paddingTop: 'calc(1rem + env(safe-area-inset-top, 0px))', paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px))' }} style={{
padding: '1rem',
paddingTop: 'calc(3rem + env(safe-area-inset-top, 0px))',
paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px))'
}}
onClick={onClose} onClick={onClose}
> >
<div <div