[GlobalStep] "WooPayment" banner fails to render properly on "Woocommerce > Settings > Payment" page for smaller viewports.

[gglobalstep]

Bug Description:
"WooPayment" banner fails to render properly on "Woocommerce > Settings > Payment" page for smaller viewports.

Environment:
Woocommerce Version: 8.7.0
WordPress version: 6.5.2
WooCommerce Payments: v7.5.0

PC:
Windows 10
Chrome (Version 123.0.6312.123)
Firefox (Version 124.0.2)

Steps To Reproduce:

1. Create a test site.
2. Install and activate the Woocommerce version 8.8.0.40 plugins.
3. Install and activate WooPayment plugin.
4. Go to "Woocommerce > Settings > Payment" page.
5. Open browser console window and set viewport to mobile device.
6. Observe that, "WooPayment" banner fails to render properly for smaller viewports.

Note:
Issue occurs with the 8.8.0.40 version (but not on 8.8 RC) so it may persist in the 8.9 release if not addressed.

Actual Result:
"WooPayment" banner fails to render properly on "Woocommerce > Settings > Payment" page for smaller viewports.

Expected Result:
"WooPayment" banner should render properly on "Woocommerce > Settings > Payment" page for smaller viewports.

Screenshot:

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

`

WordPress Environment

WC Version: 8.7.0
REST API Version: ✔ 8.7.0
Action Scheduler Version: ✔ 3.7.2
Log Directory Writable: ✔
WP Version: 6.5.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: ✔

Server Environment

Server Info: nginx
PHP Version: 8.1.28
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 8.7.1
OpenSSL/1.1.1w

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

Database

WC Database Version: 8.7.0
WC Database Prefix: wp_
Total Database Size: 5.24MB
Database Data Size: 2.63MB
Database Index Size: 2.61MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.08MB + Index: 0.09MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.25MB + Index: 0.27MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.19MB + Index: 0.13MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.14MB + Index: 0.09MB + Engine InnoDB
wp_jetpack_sync_queue: Data: 0.14MB + Index: 0.06MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.34MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.13MB + Index: 0.09MB + Engine InnoDB
wp_posts: Data: 0.09MB + Index: 0.06MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_orders: Data: 0.06MB + Index: 0.11MB + Engine InnoDB
wp_wc_orders_meta: Data: 0.25MB + Index: 0.47MB + Engine InnoDB
wp_wc_order_addresses: Data: 0.06MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 24
page: 8
post: 2
product: 23
product_variation: 7
revision: 1
shop_coupon: 2
shop_order_placehold: 84
wp_navigation: 1

Security

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

Active Plugins (7)

Query Monitor: by John Blackbourn – 3.15.0
Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team – 5.3.2
Code Snippets: by Code Snippets Pro – 3.6.4
Jetpack: by Automattic – 13.4-a.1
WooPayments: by Automattic – 7.5.0-test-3
Woo Subscriptions: by WooCommerce – 6.2.0
WooCommerce: by Automattic – 8.7.0

Inactive Plugins (1)

WooCommerce Payments Dev Tools: by Automattic –

Dropin Plugins ()

advanced-cache.php: advanced-cache.php
db.php: Query Monitor Database Class (Drop-in)
object-cache.php: Memcached

Must Use Plugins (1)

load.php: by –

Settings

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 Woo.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: –

Logging

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

WC Pages

Shop base: #6 - /shop/
Cart: #7 - /cart/
Checkout: #8 - /checkout/
My account: #9 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Storefront
Version: 4.5.5
Author URL: https://woocommerce.com/
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: –

WooPayments

Version: 7.5.0-test-3
Connected to WPCOM: Yes
WPCOM Blog ID: 231967197
Account ID: acct_1P65ahFsC1u10Rcs
Payment Gateway: Enabled
Test Mode: Enabled
Enabled APMs: card,bancontact,ideal
WooPay: Enabled (product,cart,checkout)
WooPay Incompatible Extensions: No
Apple Pay / Google Pay: Enabled (product,cart,checkout)
Fraud Protection Level: basic
Multi-currency: Enabled
Public Key Encryption: Disabled
Auth and Capture: Enabled
Documents: Disabled
Logging: Enabled

Subscriptions

WCS_DEBUG: ✔ No
Subscriptions Mode: ✔ Live
Subscriptions Live URL: https://free-toad-kookaburra.jurassic.ninja
Subscriptions-core Library Version: 7.0.0
Subscription Statuses: wc-active: 18
wc-cancelled: 1
wc-on-hold: 2

WooCommerce Account Connected: ❌ No
Report Cache Enabled: ✔ Yes
Cache Update Failures: ✔ 0 failure

Store Setup

Country / State: Belgium

Subscriptions by Payment Gateway

WooPayments: wc-active: 18
wc-cancelled: 1
wc-on-hold: 2

Payment Gateway Support

WooPayments: products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

WooPayments (Bancontact): products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

WooPayments (iDEAL): products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
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
product-variation-management
product-virtual-downloadable
product-external-affiliate
product-grouped
product-linked
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: customize-store
minified-js
new-product-management-experience
product-pre-publish-modal
settings
async-product-editor-category-field

Daily Cron: ✔ Next scheduled: 2024-04-17 06:26:22 +00:00
Options: ✔
Notes: 66
Onboarding: skipped

Action Scheduler

Canceled: 30
Oldest: 2024-04-16 07:33:18 +0000
Newest: 2024-04-16 14:27:26 +0000

Complete: 597
Oldest: 2024-04-16 06:26:45 +0000
Newest: 2024-04-16 10:16:12 +0000

Failed: 5
Oldest: 2024-04-16 07:26:37 +0000
Newest: 2024-04-16 13:29:24 +0000

Pending: 22
Oldest: 2024-04-17 06:26:45 +0000
Newest: 2024-06-16 10:07:49 +0000

Status report information

Generated at: 2024-04-16 15:38:23 +00:00
`