pico icon indicating copy to clipboard operation
pico copied to clipboard

Dialog height on mobile devices (svh vs vh)

Open JakobStaudt opened this issue 10 months ago • 0 comments

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.

JakobStaudt avatar Apr 13 '24 12:04 JakobStaudt