Fix: Improve donation form modal on mobile

[pauloiankoski]

Resolves GIVE-3057

Description

When opening a donation form modal on a mobile device, the overlay element experiences layout issues when the virtual keyboard appears. This creates a poor user experience as users attempt to fill out the donation form, with the overlay and modal positioning becoming unstable.

This PR removes the custom --visual-viewport-height property and uses 100dvh instead. Now the overlay uses the viewport height provided by the browser, which improves how the modal behaves on mobile when the virtual keyboard appears.

See the issue:

ScreenRecording_10-29-2025.09-27-40_1.MP4

Affects

Donation Form Modal

Visuals

CleanShot.2026-02-09.at.18.14.37.mp4

Testing Instructions

1. Create a new GiveWP > Campaign, publish the campaign page with the defaults
2. View the campaign page, and click the Donate on a mobile device.
3. Try to complete a donation.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[jonwaldstein]

We need to be careful with this one as the modal needs to be compatible with different form designs and screen sizes 😄

[pauloiankoski]

@jonwaldstein I reverted all commits and added a new one just replacing --visual-viewport-height with 100dvh.

[jonwaldstein]

@pauloiankoski thanks for the update, this should do the job 😄