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

Enhance ConnectionModal: add useRef for modal content scrolling, ensuring smooth transition when switching views, and improve styling for better overflow handling and responsiveness.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 03:42:32 +03:00
parent a82e809a34
commit d54279baf7
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ConnectionModal.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useMemo, useEffect } from 'react' import { useState, useMemo, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { subscriptionApi } from '../api/subscription' import { subscriptionApi } from '../api/subscription'
@@ -205,6 +205,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
const [copied, setCopied] = useState(false) const [copied, setCopied] = useState(false)
const [detectedPlatform, setDetectedPlatform] = useState<string | null>(null) const [detectedPlatform, setDetectedPlatform] = useState<string | null>(null)
const [showAppSelector, setShowAppSelector] = useState(false) const [showAppSelector, setShowAppSelector] = useState(false)
const modalContentRef = useRef<HTMLDivElement>(null)
const { data: appConfig, isLoading, error } = useQuery<AppConfig>({ const { data: appConfig, isLoading, error } = useQuery<AppConfig>({
queryKey: ['appConfig'], queryKey: ['appConfig'],
@@ -231,6 +232,11 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
} }
}, [appConfig, detectedPlatform, selectedApp]) }, [appConfig, detectedPlatform, selectedApp])
// Scroll modal content to top when switching views
useEffect(() => {
modalContentRef.current?.scrollTo({ top: 0, behavior: 'instant' })
}, [showAppSelector])
// Scroll lock when modal is open (cross-platform) // Scroll lock when modal is open (cross-platform)
useEffect(() => { useEffect(() => {
const scrollY = window.scrollY const scrollY = window.scrollY
@@ -342,16 +348,17 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
// Modal wrapper - top aligned with auto-focus // Modal wrapper - top aligned with auto-focus
const ModalWrapper = ({ children }: { children: React.ReactNode }) => ( const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
<div <div
className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center pt-8 sm:pt-12" className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center"
style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }} style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
onClick={onClose} onClick={onClose}
> >
<div <div
ref={(el) => el?.focus()} ref={modalContentRef}
tabIndex={-1} tabIndex={-1}
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 outline-none" 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"
style={{ style={{
maxHeight: 'calc(100dvh - 6rem)', maxHeight: 'calc(100dvh - 6rem)',
WebkitOverflowScrolling: 'touch',
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >