fix(PageLayout): use dvh to support the correct height on iOS devices

[joshblack]

Closes https://github.com/github/primer/issues/1211

This PR updates the useStickyPaneHeight hook in PageLayout to use dvh for values, if it's supported on the user's device.

Note: this property seems to have a regression in Safari 15.6: https://bugs.webkit.org/show_bug.cgi?id=242758

Screenshots

For a quick overview of dvh:

This behaves as intended except for Safari on macOS. It seems like Safari is including the height of the title bar in this situation instead of the intended height (based on the height difference being the same height as the title bar).

It seems like this bug is captured over in: https://bugs.webkit.org/show_bug.cgi?id=242758 and was a regression in Safari 15.6

Merge checklist

• [ ] Added/updated tests
• [ ] Added/updated documentation
• [x] Tested in Chrome
• [x] Tested in Firefox
• [x] Tested in Safari
  • [x] iOS Safari
• [x] Tested in Edge

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: e90771810cf6f676d48e621fc5f0fe41083ccb36

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

size-limit report 📦

Path	Size
dist/browser.esm.js	77.18 KB (+0.11% 🔺)
dist/browser.umd.js	77.81 KB (+0.14% 🔺)

[colebemis]

From the testing @joshblack and I did, it looks like the experience of using 100vh on Mobile Safari is not as bad as the experience of using 100dvh on Desktop Safari. I vote to delay using dvh until Apple fixes the dvh bug in Safari 15.6+. How does that sound @vdepizzol @joshblack?

[joshblack]

Notes

• Can we be smarter about how we target dvh so that it works on iOS/iPadOS?
  • @supports (-webkit-touch-callout: none) { } is specific to mobile safari
• Can we sniff the user agent to know the current device/browser/platform?
• Instead of checking support for dvh, limit support for dvh on mobile (specifically iPadOS)

If we cannot do any of above, prioritize the desktop experience

[joshblack]

Added a quick check for the touch-callout property and should be good to go!