Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mini Cart block - Fix the drawer content height to allow checkout button to show. (https://github.com/woocommerce/woocommerce-blocks/pull/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.
This commit is contained in:
Daniel W. Robert 2023-02-01 11:48:37 -05:00 committed by GitHub
parent b368835638
commit 376bbc8993
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
View File

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