fix(default): update layout to use dynamic vh

[markpinero]

This PR fixes issue #1279 which overflows the user avatar section and footer. The issue is documented here, where 100vh will take 100% of viewport height regardless of UI chrome. This is solved using the dvh unit which changes based on the UI.

This issue only affects tablets at >1280px width (eg: 11/13in iPad Pro).

I'm not very knowledgable in unocss syntax, but copied the scrollbar-hide implementation since it applies a non-standard CSS rule-set. Reason being is if they are applied directly to tag (eg: <div h-screen h-100dvh>, it can not apply correctly if h-screen is after h-100dvh in the stylesheet.

The CSS rule I created merges the two to read like so:

.h-100dvh {
  height: 100vh;
  height: 100dvh;
}

Where it will apply 100dvh where it is supported, and 100vh elsewhere.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	00aa070
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/63f844e739b3e20007c87dc0

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	00aa070
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/63f844e7b3f6c00008f34ec6
😎 Deploy Preview	https://deploy-preview-1817--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[patak-dev]

Thanks! Sorry it took us a while to merge it