"View cart" button disappears in mobile view within the mini cart block

[tomxygen]

Describe the bug

The "view cart" button is not visible in the mini cart block when viewing it on mobile (portrait).
Instead, it's visible on desktop, tablet and mobile landscape.

To reproduce

Steps to reproduce the behavior:

1. Add the mini cart block in the header menu
2. Add a product to the cart
3. Open the mini cart on desktop and on mobile

Expected behavior

Both the "proceed to checkout" and the "view cart" button should be visible on mobile and desktop.
Instead, on mobile the "proceed to checkout" button is shown, and the "view cart" button is hidden, preventing people on mobile to see the cart and edit/add/remove the products they're buying.

Screenshots

DESKTOP:

MOBILE:

If applicable, add screenshots to help explain your problem.

Environment

`

WordPress Environment

WordPress address (URL): https://theshakups.com/fse
Site address (URL): https://theshakups.com/fse
WC Version: 7.7.0
REST API Version: ✔ 7.7.0
WC Blocks Version: ✔ 10.2.0
Action Scheduler Version: ✔ 3.5.4
Log Directory Writable: ✔
WP Version: 6.2.2
WP Multisite: ✔
WP Memory Limit: 3 GB
WP Debug Mode: –
WP Cron: –
Language: en_US
External object cache: –

Server Environment

Server Info: Apache
PHP Version: 8.0.22
PHP Post Max Size: 2 GB
PHP Time Limit: 1000
PHP Max Input Vars: 16384
cURL Version: 7.29.0
NSS/3.53.1

SUHOSIN Installed: –
MySQL Version: 10.5.17-MariaDB
Max Upload Size: 1 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 7.7.0
WC Database Prefix: wp_5_
Total Database Size: 30.40MB
Database Data Size: 27.47MB
Database Index Size: 2.93MB
wp_5_woocommerce_sessions: Data: 17.55MB + Index: 0.44MB + Engine InnoDB
wp_5_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_5_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_woocommerce_order_itemmeta: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_5_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_5_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_actionscheduler_actions: Data: 0.08MB + Index: 0.11MB + Engine InnoDB
wp_5_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_actionscheduler_logs: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_5_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_comments: Data: 0.06MB + Index: 0.09MB + Engine InnoDB
wp_5_easywpsmtp_debug_events: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_easywpsmtp_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_options: Data: 3.31MB + Index: 0.19MB + Engine InnoDB
wp_5_postmeta: Data: 1.52MB + Index: 0.27MB + Engine InnoDB
wp_5_posts: Data: 2.52MB + Index: 0.13MB + Engine InnoDB
wp_5_snippets: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_5_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_5_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_order_addresses: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_5_wc_order_bundle_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_5_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_5_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_5_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_5_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_wc_spm_checkpoints: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_5_woocommerce_bundled_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_woocommerce_bundled_items: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_5_wpmailsmtp_debug_events: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_wpmailsmtp_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_wt_sc_coupon_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_5_ycd_subscribers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_blogmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_blogs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_registration_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_signups: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_site: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_sitemeta: Data: 1.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.11MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB

Post Type Counts

attachment: 137
custom_css: 1
customize_changeset: 186
nav_menu_item: 17
page: 19
post: 122
product: 26
product_variation: 4
revision: 219
shop_coupon: 1
shop_order: 25
shop_order_placehold: 3
shop_order_refund: 1
uip-ui-template: 2
wp_global_styles: 2
wp_navigation: 1
wp_template: 8
wp_template_part: 2
ycdcountdown: 2

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

Active Plugins (13)

Block Visibility: by Nick Diego – 3.0.2
Gutenberg: by Gutenberg Team – 15.7.1
Jetpack: by Automattic – 12.1
Ajax add to cart for WooCommerce: by QuadLayers – 2.1.0
WooCommerce Blocks: by Automattic – 10.2.0
WooCommerce Stripe Gateway: by WooCommerce – 7.4.0
WooCommerce: by Automattic – 7.7.0
Easy WP SMTP: by Easy WP SMTP – 2.1.0
WP Fastest Cache: by Emre Vona – 1.1.5
CDN Enabler: by KeyCDN – 2.0.6
Jetpack: by Automattic – 12.1
NS Cloner - Site Copier: by Never Settle – 4.2.2.2
Two Factor: by Plugin Contributors – 0.8.1

Inactive Plugins (27)

Akismet Anti-Spam: by Automattic – 5.1
All-in-One WP Migration: by ServMask – 7.73
Bought Together for WooCommerce: by WP1 – 1.3.1
Checkout Field Editor for WooCommerce: by ThemeHigh – 1.8.2
Code Snippets: by Code Snippets Pro – 3.3.0
Countdown builder: by Adam Skaat – 2.5.6
Facebook for WooCommerce: by Facebook – 3.0.23
Frequently Bought Together: by Premmerce – 1.0.2
Health Check & Troubleshooting: by The WordPress.org community – 1.6.0
iubenda | All-in-one Compliance for GDPR / CCPA Cookie Consent + more: by iubenda – 3.7.0
Jetpack CRM: by Automattic - Jetpack CRM team – 5.7.0
Kadence Blocks – Gutenberg Blocks for Page Builder Features: by Kadence WP – 3.0.37
Kadence Pro - Premium addon for the Kadence Theme: by Kadence WP – 1.0.7
Kadence Starter Templates: by Kadence WP – 1.2.20
Object Cache Pro: by Rhubarb Group – 1.17.1
UiPress Lite: by Admin 2020 – 3.1.12
Variation Swatches for WooCommerce: by CartFlows – 1.0.7
Wider Admin Menu: by WPChill – 1.4
WooCommerce Beta Tester: by WooCommerce – 2.1.0
WooCommerce Extended Coupon Features FREE: by Soft79 – 3.3.3
WooCommerce Google Analytics Integration: by WooCommerce – 1.8.1
WooCommerce PayPal Payments: by WooCommerce – 2.0.4
WooCommerce Points and Rewards: by WooCommerce – 1.7.21
WooCommerce Product Bundles: by WooCommerce – 6.18.3
WooCommerce Sales Performance Monitor: by Nexcess – 1.0.1
WPC Frequently Bought Together for WooCommerce: by WPClever – 6.0.2
Wp Maximum Upload File Size: by CodePopular – 1.0.9

Dropin Plugins (1)

fatal-error-handler.php: fatal-error-handler.php

Must Use Plugins (2)

Health Check Troubleshooting Mode: by – 1.8.1
Nexcess Managed Apps: by Nexcess – 1.40.0

Settings

API Enabled: –
Force SSL: –
Currency: EUR (€)
Currency Position: right
Thousand Separator: .
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: bundle (bundle)
external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature screen enabled: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –

WC Pages

Shop base: #958 - /shop/
Cart: #959 - /cart/
Checkout: #960 - /checkout/
My account: #968 - /my-account-2/
Terms and conditions: #1502 - /termini-e-condizioni/

Theme

Name: Twenty Twenty-Three
Version: 1.1
Author URL: https://wordpress.org
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: /chroot/home/ae3b5caa/3e263afc2c.nxcli.io/html/wp-content/plugins/woo-gutenberg-products-block/templates/notices/error.php
/chroot/home/ae3b5caa/3e263afc2c.nxcli.io/html/wp-content/plugins/woo-gutenberg-products-block/templates/notices/notice.php
/chroot/home/ae3b5caa/3e263afc2c.nxcli.io/html/wp-content/plugins/woo-gutenberg-products-block/templates/notices/success.php

Admin

Enabled Features: activity-panels
analytics
coupons
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: product-block-editor
minified-js
new-product-management-experience
product-variation-management
settings

Daily Cron: ✔ Next scheduled: 2022-11-26 13:59:38 +01:00
Options: ✔
Notes: 60
Onboarding: completed

Action Scheduler

Complete: 41
Oldest: 2023-04-20 18:09:29 +0000
Newest: 2023-05-21 13:08:16 +0000

Failed: 36
Oldest: 2023-02-18 21:02:31 +0000
Newest: 2023-05-13 18:13:56 +0000

Pending: 1
Oldest: 2023-05-22 13:08:16 +0000
Newest: 2023-05-22 13:08:16 +0000

Status report information

Generated at: 2023-05-21 14:13:08 +01:00
`

[shaunandrews]

I agree that it's strange to have the "View my cart" button on the larger viewports, but not on smaller viewports. This is especially strange to me considering that the Mini-Cart drawer's width is about the same everywhere.

We should avoid hiding functionality only on mobile. Instead, we should show the "View my cart" button, but have it appear stacked under the checkout button.

Here's a quick sketch of what I have in mind:

[tomxygen]

@shaunandrews thank you for your reply!

I tried to place two buttons side by side in a Row block.
They appear stacked when the mini cart's width is smaller.

Here is a video:
https://github.com/woocommerce/woocommerce-blocks/assets/47855768/877b358d-3381-4c1e-98b1-f52047a8185a

[roykho]

Just dropping a note that this is fixed via #9603

But leaving the same note in the PR here for brevity:

Note that I opted not to put Checkout before View my cart button as in the suggested design because there is not clean way to make the tabbing order to work well which would introduce an accessibility issue. For example changing order property on the two buttons in CSS would indeed visually work however tabbing would then be off. You would need to utilize tabindex and have that change based on browser width via JS but in this case I don't think that is urgent.