fix(flyout): support dynamic heights on mobile devices#3528
Open
lubber-de wants to merge 4 commits into
Open
Conversation
lubber-de
added
type/bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.