Mini Cart block - Fix the drawer content height to allow checkout but…

…ton 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
#8351 (review)

Keeping `vh` as a fallback, along with `-webkit-fill-available` gives us
the widest range of support.

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;
 }