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

Enhance ConnectionModal: improve body scroll locking functionality for better user experience on iOS, restore original styles and scroll position on modal close, and update modal wrapper styling for improved responsiveness and visual appeal.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 03:11:19 +03:00
parent 5239fdb85f
commit 026ba65b8c
1 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ConnectionModal.tsx
View File

@@ -215,12 +215,36 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
setDetectedPlatform(detectPlatform())
}, [])
// Lock body scroll when modal is open
// Lock body scroll when modal is open (works on iOS too)
useEffect(() => {
const originalStyle = window.getComputedStyle(document.body).overflow
document.body.style.overflow = 'hidden'
const scrollY = window.scrollY
const body = document.body
const html = document.documentElement
// Save original styles
const originalBodyOverflow = body.style.overflow
const originalBodyPosition = body.style.position
const originalBodyTop = body.style.top
const originalBodyWidth = body.style.width
const originalHtmlOverflow = html.style.overflow
// Lock scroll
body.style.overflow = 'hidden'
body.style.position = 'fixed'
body.style.top = `-${scrollY}px`
body.style.width = '100%'
html.style.overflow = 'hidden'
return () => {
document.body.style.overflow = originalStyle
// Restore original styles
body.style.overflow = originalBodyOverflow
body.style.position = originalBodyPosition
body.style.top = originalBodyTop
body.style.width = originalBodyWidth
html.style.overflow = originalHtmlOverflow
// Restore scroll position
window.scrollTo(0, scrollY)
}
}, [])
@@ -295,16 +319,18 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
// Modal wrapper - centered on desktop, top on mobile
const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
<div
className="fixed inset-0 bg-black/70 z-50 flex items-start sm:items-center justify-center overflow-y-auto"
className="fixed inset-0 bg-black/70 z-50 flex items-start sm:items-center justify-center overflow-y-auto overscroll-contain"
style={{
padding: '1rem',
paddingTop: 'calc(3rem + env(safe-area-inset-top, 0px))',
paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px))'
paddingTop: 'calc(2.5rem + env(safe-area-inset-top, 0px))',
paddingBottom: 'calc(1.5rem + env(safe-area-inset-bottom, 0px))',
WebkitOverflowScrolling: 'touch'
}}
onClick={onClose}
>
<div
className="w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-hidden animate-scale-in"
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 - 4rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))' }}
onClick={(e) => e.stopPropagation()}
>
{children}