From 3e5847a2db28083f40730df52f654b1f2c5b0d41 Mon Sep 17 00:00:00 2001 From: Brendan Rygus Date: Wed, 8 Mar 2023 16:53:44 +0000 Subject: [PATCH] [Frame] Fix min-height for iOS browsers (#8590) --- .changeset/two-swans-peel.md | 5 +++++ polaris-react/src/components/Frame/Frame.scss | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/two-swans-peel.md diff --git a/.changeset/two-swans-peel.md b/.changeset/two-swans-peel.md new file mode 100644 index 00000000000..6b7e801d9ad --- /dev/null +++ b/.changeset/two-swans-peel.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +[Frame] Fix minimum height overflowing in iOS Webkit browsers diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index 352b5afaeb7..162325d6998 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/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);