Install Woo header / Mobile App banner is not properly layout in mobile version

[chihsuan]

Quick summary

The Woo header / mobile app installation banner is half-visible when the left menu in wp-admin is open.

Original issue: woocommerce/woocommerce#52832

Since this issue is only happening on WPCOM, we transferred the issue from WooCommerce repository to Calypso

Steps to reproduce

1. Use Android mobile device or dev tools > Simulate a Android mobile device.
2. Open wp-admin.
3. Open the main menu.
4. Observe that the toolbar is only half-visible.

What you expected to happen

The banner should be fully visible or hidden when left menu is open.

What actually happened

The banner is only half-visible when the left menu is open.

Check the video

11-14--13-45.mp4

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Temporary Fix Using CSS

/* For mobile view */

/* Increase z-index of WPCOM admin menu */
.auto-fold .wp-responsive-open #adminmenuback {
    z-index: 9999; /* Adjust to be higher than WooCommerce header */
}

/* OR Reduce the z-index of the WooCommerce header */
.woocommerce-layout__header {
    z-index: 100; /* Lower than WPCOM admin menu */
}

Platform (Simple and/or Atomic)

Atomic

Logs or notes

WordPress Environment

WordPress address (URL): [Redacted]
Site address (URL): [Redacted]
WC Version: 9.4.1
Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site.
Action Scheduler Version: ✔ 3.8.2
Log Directory Writable: ✔
WP Version: 6.7
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_GB
External object cache: ✔

Server Environment

Server Info: nginx
PHP Version: 8.1.30
PHP Post Max Size: 2 GB
PHP Time Limit: 850
PHP Max Input Vars: 6144
cURL Version: 8.10.1
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 10.6.18-MariaDB-log
Max Upload Size: 2 GB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

[REDACTED]

Post Type Counts

amp_validated_url: 1
attachment: 2
jetpack_migration: 2
jp_img_sitemap: 6
jp_sitemap: 6
jp_sitemap_master: 6
mailpoet_page: 1
nav_menu_item: 1
page: 6
post: 2
product: 2
revision: 1
shop_coupon: 1
shop_order: 31
shop_order_refund: 1
wp_global_styles: 1

Security

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

Active Plugins (14)

Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team – 5.3.3
AMP: by AMP project contributors – 2.5.5
CoBlocks: by GoDaddy – 3.1.13
Crowdsignal Forms: by Automattic – 1.7.2
Gutenberg: by Gutenberg Team – 19.5.1
Jetpack: by Automattic – 14.1-a.2
Layout Grid: by Automattic – 1.8.4
MailPoet: by MailPoet – 5.3.7
Page Optimize: by Automattic – 0.5.6
Crowdsignal Polls & Ratings: by Automattic
Inc. – 3.1.2

WooCommerce Payments Dev Tools: by Automattic –
WooPayments: by WooCommerce – 8.4.0
WooCommerce Shipping & Tax: by WooCommerce – 2.8.3
WooCommerce: by Automattic – 9.4.1

Inactive Plugins (1)

Classic Editor: by WordPress Contributors – 1.6.5

Dropin Plugins ()

advanced-cache.php: advanced-cache.php
object-cache.php: Memcached

Must Use Plugins (1)

wpcomsh-loader.php: by –

Settings

Legacy API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
subscription (subscription)
variable (variable)
variable subscription (variable-subscription)

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 enabled: –
Order datastore: WC_Order_Data_Store_CPT
HPOS data sync enabled: –

Logging

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 5 MB

WC Pages

Shop base: #7 - /shop/
Basket: #8 - /basket/ - Contains the [woocommerce_cart] shortcode
Checkout: #9 - /checkout/ - Contains the [woocommerce_checkout] shortcode
My account: #10 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Blank Canvas
Version: 1.2.12-wpcom
Author URL: https://automattic.com/
Child Theme: ✔
Parent Theme Name: Seedlet
Parent Theme Version: 1.1.34-wpcom
Parent Theme Author URL: https://automattic.com/
WooCommerce Support: ✔

Templates

Overrides: –

WooPayments

Version: 8.4.0
Connected to WPCOM: Yes
WPCOM Blog ID: 198219640
Account ID: acct_1QKbxhFmAJ1yYXI0
Payment Gateway: ❌ Needs setup
Test Mode: Enabled
Enabled APMs: card
WooPay: Disabled
WooPay Incompatible Extensions: No
Apple Pay / Google Pay: Enabled (product,cart,checkout)
Fraud Protection Level: basic
Multi-currency: Enabled
Auth and Capture: Enabled
Documents: Disabled
Logging: Enabled

MailPoet

Sending Method: PHPMail
Send all site's emails with: Default WordPress sending method
Task Scheduler method: WordPress
Cron ping URL: https://anotherpaymentssite.wpcomstaging.com?mailpoet_router&endpoint=cron_daemon&action=ping

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customize-store
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
pattern-toolkit-full-composability
product-custom-fields
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
printful
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page
launch-your-store

Disabled Features: product-data-views
experimental-blocks
minified-js
product-pre-publish-modal
settings
async-product-editor-category-field
product-editor-template-system
blueprint
reactify-classic-payments-settings
use-wp-horizon

Daily Cron: ✔ Next scheduled: 2024-11-15 09:11:20 +03:00
Options: ✔
Notes: 209
Onboarding: completed

Action Scheduler

Canceled: 1
Oldest: 2024-11-12 21:28:58 +0300
Newest: 2024-11-12 21:28:58 +0300

Complete: 153
Oldest: 2024-10-15 09:01:21 +0300
Newest: 2024-11-14 15:45:39 +0300

Failed: 38
Oldest: 2022-11-10 15:42:41 +0300
Newest: 2024-04-01 08:44:19 +0300

Pending: 1
Oldest: 2024-11-15 11:15:36 +0300
Newest: 2024-11-15 11:15:36 +0300

Status report information

Generated at: 2024-11-14 15:48:11 +03:00

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Appearance & Themes: The issue relates to the layout and visibility of the Woo header and mobile app banner, which affects the appearance of the site.
• [Feature] Calypso & wp-admin Navigation: The problem occurs in the wp-admin area when the left menu is open, which relates to navigation features in Calypso.
• [Feature] Woo Express: As this issue involves WooCommerce features specifically, it relates to the Woo Express functionality on WordPress.com.
• [Feature] Site Performance: The issue impacts the user experience by limiting the visibility of key UI elements, which can affect overall site performance.