Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dialog height on mobile devices (svh vs vh) #514

Open
JakobStaudt opened this issue Apr 13, 2024 · 0 comments
Open

Dialog height on mobile devices (svh vs vh) #514

JakobStaudt opened this issue Apr 13, 2024 · 0 comments

Comments

@JakobStaudt
Copy link

When viewing a modal with large height on a Pico CSS page on iOS 17 (Safari), I get some buggy overflow behaviour.
The modal is larger than the vieport, because it's max-height is set to calc(100vh - var(--pico-spacing) * 2).
I replaced this with calc(100svh - var(--pico-spacing) * 2) (svh instead of vh), which uses the smallest possible viewport size to limit the modal height.
Otherwise, the modal is sized according to the viewport sized when the browser UI is collapsed, which causes overflow when the browser UI is expanded.
Is this intended behaviour or will this be fixed?
Instead of svh, dvh could also be considered, which would dynamically resize the modal according to the current browser viewport height.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant