From b9fe30b7bc2bc33fc0d85df6a36d0b71546b8246 Mon Sep 17 00:00:00 2001 From: "Daniel W. Robert" Date: Tue, 31 Jan 2023 13:34:19 -0500 Subject: [PATCH 1/2] Add max-height to Mini Cart drawer. By giving the Mini Cart contents a max height with the -webkit-fill-available property, we can ensure that the browser chrome is accounted for on mobile devices. --- assets/js/blocks/mini-cart/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index cc4f664cf48..bb03c10f089 100644 --- a/assets/js/blocks/mini-cart/style.scss +++ b/assets/js/blocks/mini-cart/style.scss @@ -88,6 +88,7 @@ .wp-block-woocommerce-mini-cart-contents { box-sizing: border-box; height: 100vh; + max-height: -webkit-fill-available; padding: 0; justify-content: center; } @@ -98,6 +99,7 @@ .wp-block-woocommerce-empty-mini-cart-contents-block, .wp-block-woocommerce-filled-mini-cart-contents-block { height: 100vh; + max-height: -webkit-fill-available; display: flex; flex-direction: column; } From 68b222db4fcc5745550a6d3787b83f5956530e26 Mon Sep 17 00:00:00 2001 From: "Daniel W. Robert" Date: Wed, 1 Feb 2023 11:20:51 -0500 Subject: [PATCH 2/2] Add `dvh` and keep `vh` as a fallback for height. By adding `dvh`, we also account for non-webkit mobile browsers that have the same hidden button issue. See https://github.com/woocommerce/woocommerce-blocks/pull/8351#pullrequestreview-1278867767 Keeping `vh` as a fallback, along with `-webkit-fill-available` gives us the widest range of support. --- assets/js/blocks/mini-cart/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index bb03c10f089..a9039d09bd6 100644 --- a/assets/js/blocks/mini-cart/style.scss +++ b/assets/js/blocks/mini-cart/style.scss @@ -88,6 +88,7 @@ .wp-block-woocommerce-mini-cart-contents { box-sizing: border-box; height: 100vh; + height: 100dvh; max-height: -webkit-fill-available; padding: 0; justify-content: center; @@ -99,6 +100,7 @@ .wp-block-woocommerce-empty-mini-cart-contents-block, .wp-block-woocommerce-filled-mini-cart-contents-block { height: 100vh; + height: 100dvh; max-height: -webkit-fill-available; display: flex; flex-direction: column;