diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx index e79d9a4..082663d 100644 --- a/src/components/ConnectionModal.tsx +++ b/src/components/ConnectionModal.tsx @@ -339,18 +339,19 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { window.location.href = redirectUrl } - // Modal wrapper - centered on all devices + // Modal wrapper - top aligned with auto-focus const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
el?.focus()} + 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" style={{ - maxHeight: 'calc(100dvh - 4rem)', - marginTop: 'env(safe-area-inset-top, 0px)', - marginBottom: 'env(safe-area-inset-bottom, 0px)', + maxHeight: 'calc(100dvh - 6rem)', }} onClick={(e) => e.stopPropagation()} > diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx index 4333c3e..dda3800 100644 --- a/src/components/TopUpModal.tsx +++ b/src/components/TopUpModal.tsx @@ -164,17 +164,22 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top : convertAmount(rub).toFixed(currencyDecimals) const isPending = topUpMutation.isPending || starsPaymentMutation.isPending + // Auto-focus input on mount + useEffect(() => { + const timer = setTimeout(() => { + inputRef.current?.focus() + }, 100) + return () => clearTimeout(timer) + }, []) + return (
e.stopPropagation()} > {/* Header */}