search

Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
174 stars 69 forks source link

A few CSS selectors for styling the WP components are not scoped and affect some pages other than this extension #5703

Open eason9487 opened 1 year ago

eason9487 commented 1 year ago

Describe the bug

Other React-powered pages in WC admin are affected by some CSS styles in WooCommerce Payments.

To Reproduce

  1. Set up a WooCommerce version that uses React to render the Analytics pages. For example, version 7.1.0.
  2. Install and activate a WooCommerce Payments version >= 2.2.0.
  3. Go to an Analytics page. For example, the Overview page at: /wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2Foverview.
  4. Inspect a DOM that has the .components-card CSS class.
    • The DOMs can be found by running the following code via the Console tab of DevTool. 
      $$('.woocommerce-layout__main .components-card')
    • After finding them, clicking on one of the results will navigate the DevTool to inspect that DOM.
  5. The margin-bottom style of the DOM is affected by WooCommerce Payments.

Actual behavior

A few CSS styles of WooCommerce Payments affect some pages other than this extension.

Screenshots

2023-03-09 18 57 35

Expected behavior

The CSS styles of WooCommerce Payments should only apply to its pages.

Desktop:

Smartphone:

I didn't test with smartphone phones but I believe this issue happens in all environments.

Additional context

Styles are not scoped:

Affected extensions:

htdat commented 1 year ago

Thanks @eason9487 for reporting this issue. We will prioritize and work on it. In case, if you need this fix urgently, please let us know here.

FYI. I've updated your description a bit to refer to the latest stable version of WCPay 5.5.1.