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