Height of Modals on Mobile Inconsistent

[DavideIadeluca]

Current Behavior

When opening any Modal on mobile, you'll see that often the position and height of the Modal is incorrect e.g. the user first has to scroll up the modal to be able to see everything.

Steps to Reproduce

1. Open a Flarum instance on mobile
2. Open any Modal (e.g. the Login Modal)

Expected Behavior

The expectation is that the Modal has the correct height and position when opening it already.

Screenshots

Before.MP4

Environment

• Flarum version: 1.8.5
• Website URL: locally
• Webserver: locally
• Hosting environment: locally
• PHP version: 8.1.26
• Browser: Safari 16

Output of php flarum info

Flarum core: 1.8.5
PHP version: 8.1.26
MySQL version: 10.11.4-MariaDB-1:10.11.4+maria~ubu2204
Loaded extensions: Core, date, libxml, pcre, zlib, filter, hash, json, readline, Reflection, SPL, session, zend_test, ctype, curl, dom, fileinfo, gd, gmp, iconv, mbstring, openssl, pcntl, PDO, posix, standard, SimpleXML, sockets, sodium, tokenizer, xml, xmlwriter, zip, exif, mysqlnd, Phar, xmlreader, pdo_mysql, igbinary, msgpack, redis, Zend OPcache, xdebug
+-------------------+---------+--------+
| Flarum Extensions |         |        |
+-------------------+---------+--------+
| ID                | Version | Commit |
+-------------------+---------+--------+
Base URL: ...
Installation path: /opt/flarum
Queue driver: sync
Session driver: file
Mail driver: null
Debug mode: ON

Possible Solution

I propose to use dynamic viewport units, which already have broad support among browsers https://caniuse.com/viewport-unit-variants and are best explained here https://web.dev/blog/viewport-units

Additional Context

No response