fix: use dynamic viewport units for height of Modals

[DavideIadeluca]

Fixes #3950

Changes proposed in this pull request:
This change addresses an issue where the height and position of Modals on mobile is inconsistent. I propose to use dynamic viewport units which take UI elements of the browser/device into consideration and adjusts the height accordingly.

Reviewers should focus on:
Since nearly every browser on a reasonable version supports dynamic viewport units, I'm not sure if it makes sense to include the fallback everywhere. Maybe it would make more sense to automatically add fallback values when the CSS is complied?

Screenshot

After.MP4

QA
Necessity

• Has the problem that is being solved here been clearly explained?
• If applicable, have various options for solving this problem been considered?
• For core PRs, does this need to be in core, or could it be in an extension?
• Are we willing to maintain this for years / potentially forever?

Confirmed

• Frontend changes: tested on a local Flarum installation.
• Backend changes: tests are green (run composer test).
• Core developer confirmed locally this works as intended.
• Tests have been added, or are not appropriate here.

Required changes:

• Related documentation PR: (Remove if irrelevant)
• Related core extension PRs: (Remove if irrelevant)

[nodeloc]

Hi, @DavideIadeluca I modified the file but the issue haven't resolved. My iOS version is 17.1.2.

[DavideIadeluca]

Further discussion on this topic tracked in https://discuss.flarum.org/d/33930-the-modal-always-displays-incompletely-with-the-header-being-blocked/11

[DavideIadeluca]

@SychO9 I removed the fallback values, as Dynamic viewport units have broad browser support and other parts of the ecosystem would fail sooner. I think this fix can be merged anytime