[Frame] Fix min-height for iOS browsers (#8590) (#8596)

### WHY are these changes introduced?

Fixes #8590
Prevent Frame component from unnecessarily overflowing the viewport
height in mobile browsers.

The current behaviour introduces bugs in apps embedded in Shopify, as
the app iframe is loaded into an incorrectly sized container. Context:
* [Avoid 100vh in mobile
web](https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html)
* [Bug ticket in
SFN](https://github.com/orgs/Shopify/projects/6278?pane=issue&itemId=21574945)

### WHAT is this pull request doing?
Updates the `Frame` component to fill only the available viewport height
for mobile browsers with dynamic browser chrome, using the `100svh`
[(small viewport height) dynamic viewport
units](https://www.w3.org/TR/css-values-4/#small-viewport-percentage-units).

* The `Frame`'s minimum height will no longer overflow the page by
including the browser chrome in the `100vh` min-height. It will adjust
it's minimum height based on the dynamic size of the usable viewport
space.
* For desktop browsers without dynamic chrome, the min-height should
behave the same as today.
* For older browsers where dynamic viewport units are not yet supported,
we will fallback to the existing `100vh`.

See Codesandbox examples: 
* Before: https://codesandbox.io/s/gttibh
* After:
https://codesandbox.io/s/polaris-frame-ios-bottomnav-fixed-v00uld?file=/src/index.tsx

<details>
  <summary>Expand iOS screenshots</summary>

**Before**
Bottom content is cut off:
<img
src="https://user-images.githubusercontent.com/428636/227580669-94931ee1-0ad4-4588-9bcd-3f9a435403b7.png"
alt="Before the fix is applied, the footer is entirely outside of the
viewport">

Bottom content is visible only on scroll:
<img
src="https://user-images.githubusercontent.com/428636/227580671-00dda482-07d2-4de4-a11b-9bb9cc39e26a.png"
alt="Before the fix is applied, the page must be scrolled to see content
outside of the viewport">

**After**
<img
src="https://user-images.githubusercontent.com/428636/227580478-fa2ca550-9391-436d-ab77-39b01a635c13.png"
alt="After the fix is applied, all content is viewable in the mobile
viewport">
</details>


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

Tophatted using Web and [SFN app on mobile
Spin](https://admin.web.fbs-4e68.brendan-rygus.us.spin.dev/store/shop1/apps/shopify-fulfillment-dev-local/inventory/add_products).

### 🎩 checklist

- [x] Chrome latest
- [x] FF latest
- [x] Safari latest
- [x] Edge
- [x] iPhone (5/SE/X) (10+) Safari Mobile
- [x] iPad (10+) Safari Mobile
- [ ] Android device (5.x) Chrome **_Will need assistance with this
one_**
- [ ] ~Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)~
- [ ] ~Updated the component's `README.md` with documentation changes~
- [ ] ~[Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide~

Author: brendanrygus

.changeset/two-swans-peel.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+[Frame] Fix minimum height overflowing in iOS Webkit browsers

polaris-react/src/components/Frame/Frame.scss

@@ -5,6 +5,7 @@
   --pc-frame-button-size: var(--p-space-8);
   width: 100%;
   min-height: 100vh;
+  min-height: 100svh; // For mobile browsers, fill the screen taking into account dynamic browser chrome
   display: flex;
   background-color: var(--p-color-bg-app);