diff --git a/app/components/trade/FundingExplainerModal.tsx b/app/components/trade/FundingExplainerModal.tsx index 2bab20a7..c5016ca4 100644 --- a/app/components/trade/FundingExplainerModal.tsx +++ b/app/components/trade/FundingExplainerModal.tsx @@ -4,6 +4,7 @@ import { FC, useEffect, useRef } from "react"; import { createPortal } from "react-dom"; import gsap from "gsap"; import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"; +import { useLockBodyScroll } from "@/hooks/useLockBodyScroll"; interface FundingExplainerModalProps { onClose: () => void; @@ -13,6 +14,10 @@ export const FundingExplainerModal: FC = ({ onClose const overlayRef = useRef(null); const modalRef = useRef(null); const prefersReduced = usePrefersReducedMotion(); + // #2286: this was the ONE modal of the five without a scroll lock, so the + // page scrolled behind it. The other four already call this hook; the + // divergence the issue describes is now down to this and the scrim. + useLockBodyScroll(); // Keep the onClose callback in a ref so the mount effect never re-runs on parent // re-renders. The parent FundingRateCard runs a 1-second `setCountdown` setInterval, diff --git a/app/components/trade/SendPositionNftModal.tsx b/app/components/trade/SendPositionNftModal.tsx index c95d4a07..b1f9f7ed 100644 --- a/app/components/trade/SendPositionNftModal.tsx +++ b/app/components/trade/SendPositionNftModal.tsx @@ -122,7 +122,7 @@ export const SendPositionNftModal: FC = ({ onClick={(e) => { if (e.target === e.currentTarget && !loading) onCancel(); }} - className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-[2px] p-4" + className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 p-4" aria-modal="true" role="dialog" aria-label="Send Position NFT"