This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Mini Cart block - Fix the drawer content height to allow checkout button to show. #8351
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
danielwrobert
added
type: bug
woocommercebot
requested review from
a team and
danieldudzic
and removed request for
a team
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
|
Size Change: +48 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
Aljullu
reviewed
Feb 1, 2023
There was a problem hiding this comment.
I was testing this PR in Firefox and Brave for Android and it doesn't seem to work for me, the URL is still showing above the button.
However, I could fix it changing height: 100vh to dynamic units: height: 100dvh.
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.
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.
danielwrobert
force-pushed
the
fix/mini-cart-hidden-checkout-btn
branch
from
539ad90 to
68b222d
Compare
@Aljullu ah right, because those aren't webkit-based browsers and I was only targeting webkit here. Thanks for catching and for the suggestion to use Instead of replacing, I've added a |
Aljullu
approved these changes
Feb 1, 2023
senadir
pushed a commit
that referenced
this pull request
Feb 2, 2023
…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.
senadir
added a commit
that referenced
this pull request
Feb 10, 2023
* Empty commit for release pull request * update readme * Switch to select instead of resolveSelector (#8356) * 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 #8351 (review) Keeping `vh` as a fallback, along with `-webkit-fill-available` gives us the widest range of support. * update readme with changelog * add testing steps * add pr links to readme * Bumping version strings to new version. --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Daniel W. Robert <danielwrobert@users.noreply.github.com>
senadir
added a commit
that referenced
this pull request
Feb 10, 2023
* Empty commit for release pull request * update readme * Switch to select instead of resolveSelector (#8356) * 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 #8351 (review) Keeping `vh` as a fallback, along with `-webkit-fill-available` gives us the widest range of support. * update readme with changelog * add testing steps * add pr links to readme * Bumping version strings to new version. --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Daniel W. Robert <danielwrobert@users.noreply.github.com>
gigitux
added a commit
that referenced
this pull request
Feb 27, 2023
* Empty commit for release pull request * update readme * Switch to select instead of resolveSelector (#8356) * 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 #8351 (review) Keeping `vh` as a fallback, along with `-webkit-fill-available` gives us the widest range of support. * update readme with changelog * add testing steps * add pr links to readme * Bumping version strings to new version. * Check for null session before going forward (#8537) * add testing instructions * Empty commit for release pull request * add zip link * Update zip link * update zip link for testing * Bumping version strings to new version. --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Daniel W. Robert <danielwrobert@users.noreply.github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
By giving the Mini Cart contents a
max-heightwith the-webkit-fill-availableproperty, we can ensure that the browser chrome (bottom address bar) is accounted for on mobile devices.Props to @senadir and @Aljullu for their suggestions! 🎉
Fixes #7400
Screenshots
Testing
npm start.WooCommerce Visibility
Performance Impact
Changelog