From d935a6b07ff3380c52510631c4ce4e6607ecfc41 Mon Sep 17 00:00:00 2001 From: "Daniel W. Robert" Date: Wed, 1 Feb 2023 11:48:37 -0500 Subject: [PATCH] Mini Cart block - Fix the drawer content height to allow checkout button to show. (#8351) * 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. * 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 | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index cc4f664cf48..a9039d09bd6 100644 --- a/assets/js/blocks/mini-cart/style.scss +++ b/assets/js/blocks/mini-cart/style.scss @@ -88,6 +88,8 @@ .wp-block-woocommerce-mini-cart-contents { box-sizing: border-box; height: 100vh; + height: 100dvh; + max-height: -webkit-fill-available; padding: 0; justify-content: center; } @@ -98,6 +100,8 @@ .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; }