fix(flyout): support dynamic heights on mobile devices

[lubber-de]

Description

Modern followup of #2644
This is now completely solvable via pure CSS, by using the "dvh" unit supporting dynamic view heights on mobile devices (which removes the address bar on scrolling which in turn changes the height)
The now unnecessary JS code, which would otherwise calculate wrong values for the min height, can be completely removed.
Same applies for fullscreen modal, so this PR adjusts this as well.

This a breaking change as it needs a modern browser (12/2022+, iOS15.4+) supporting the dvh unit
https://caniuse.com/?search=dynamic+viewport+units

Testcase

Try the fomantic docs site for flyout and run the first example on a mobile device. Then scroll up/down and the actions area gets too high.

Summary by CodeRabbit

• Bug Fixes

  • Improved flyout and modal scrolling height behavior in modern browsers using dynamic viewport sizing for more reliable layout.
  • Prevented flyouts from performing resize-time height recalculations in lateral layouts to reduce layout jumps.

• Documentation

  • Refreshed the “Browser Support” section with higher minimum supported versions and updated how browser icons are displayed.

• Compatibility

  • Updated the default browser targets to align with the newly raised minimum versions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c0a9dcbe-72ac-4d7a-8c70-c3c112f45c6a

📥 Commits

Reviewing files that changed from the base of the PR and between 6cbd3b7 and 631221e.

📒 Files selected for processing (1)

• README.md

🚧 Files skipped from review as they are similar to previous changes (1)

• README.md

---

📝 Walkthrough

Walkthrough

Changes

The pull request raises browser minimum versions in documentation and build configuration, changes flyout and modal sizing calculations to use dvh, and removes flyout height initialization and resize recalculation.

Browser and viewport updates

Layer / File(s)	Summary
Browser support targets README.md, tasks/config/tasks.js	Browser support documentation and default Browserslist targets now use newer minimum versions.
Flyout viewport sizing and lifecycle src/themes/default/modules/flyout.variables, src/definitions/modules/flyout.js	Flyout sizing uses dynamic viewport units, while height setup and resize-time recalculation are removed.
Modal viewport sizing src/themes/default/modules/modal.variables	Modal scrolling and fullscreen overlay height calculations now use dynamic viewport units.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: colinfrick, ko2in, prudho, y0hami

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: improving flyout height behavior on mobile devices with dynamic viewport heights.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[lubber-de]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@README.md`:
- Line 63: Correct the browser name typo in the support documentation list by
changing “Saumsung Internet” to “Samsung Internet,” while preserving the
existing link, icon, and version requirement.
- Around line 58-65: Remove the empty link wrappers from the browser
compatibility entries in the README, changing each []() pattern to standalone
image syntax while preserving the existing alt text, logo URLs, and version
descriptions.

🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 92f22272-826d-4f02-9734-81ef65bf5d5b

📥 Commits

Reviewing files that changed from the base of the PR and between 43295a1 and 6cbd3b7.

📒 Files selected for processing (5)

• README.md
• src/definitions/modules/flyout.js
• src/themes/default/modules/flyout.variables
• src/themes/default/modules/modal.variables
• tasks/config/tasks.js

💤 Files with no reviewable changes (1)

• src/definitions/modules/flyout.js

[coderabbitai]

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference