Website: Replace 100vh with 100dvh to fix an "unscrollable" state on mobile devices

[adamziel]

On iPhones, 100vh may exceed the actual viewport size – Safari viewport height varies as you scroll the page and vh seems to represent the largest possible viewport.

When opening an anchor link (/#wp-admin), the browser wants to scroll down and align the top of the screen with the WordPress site. This causes Playground to occasionally end up in a slightly scrolled state where only the WordPress site is visible and you cannot scroll back to the Playground address bar:

Why? Because:

• 100vh makes the page longer than it needs to be
• The difference is just enough to span the entire Playground address bar. On the screenshot above I intentionally left just a glimpse of that address bar, but it isn't normally there.
• WordPress iframe has its own scrollbar so, by scrolling, you're only moving up and down the WordPress page

Solution: Use dvh unit

There's a special dvh unit that represents the current height of the viewport:

Testing Instructions (or ideally a Blueprint)

1. Open Playground on an iPhone or a simulator (16 Pro Max in my case)
2. Create a bunch of sites, preview Blueprints etc
3. Confirm that before this PR this puts you in an unscrollable state
4. Confirm that with this PR you can always see the browser UI

cc @annziel this might interest you