Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
eason9487 opened this issue Mar 9, 2023 · 3 comments · May be fixed by #10318
Open

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

eason9487 opened this issue Mar 9, 2023 · 3 comments · May be fixed by #10318
Labels
category: core WC Payments core related issues, where it’s obvious. focus: misc or unknown Issues that need to be added to a focus area (aka "needs focus"). good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team. priority: low The issue/PR is low priority—not many people are affected or there’s a workaround, etc. type: bug The issue is a confirmed bug.

Comments

@eason9487
Copy link
Member

eason9487 commented Mar 9, 2023 •
edited by htdat
Loading

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:

  • OS: macOS
  • Browser Google Chrome
  • Version 110.0.5481.177

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:
@eason9487 eason9487 added the type: bug The issue is a confirmed bug. label Mar 9, 2023
@htdat
Copy link
Member

htdat commented Mar 10, 2023

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.

@htdat htdat added category: core WC Payments core related issues, where it’s obvious. needs prioritisation Triage finished and issues are ready for the following processing. labels Mar 10, 2023
@RadoslavGeorgiev RadoslavGeorgiev added the good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team. label Mar 23, 2023
@haszari haszari added the focus: misc or unknown Issues that need to be added to a focus area (aka "needs focus"). label Mar 11, 2024
@vbelolapotkov
Copy link
Collaborator

@anu-rock sending this one to your team's maintenance backlog. I've assigned the issue to you for this, please take care of adding it to the team board.

@anu-rock anu-rock removed their assignment Jan 8, 2025
@anu-rock anu-rock added priority: low The issue/PR is low priority—not many people are affected or there’s a workaround, etc. and removed needs prioritisation Triage finished and issues are ready for the following processing. labels Jan 8, 2025
@BurakParsAydin BurakParsAydin linked a pull request Feb 6, 2025 that will close this issue
Open
6 tasks
@BurakParsAydin
Copy link
Contributor

@vbelolapotkov FYI, I created a PR. Please ref

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
category: core WC Payments core related issues, where it’s obvious. focus: misc or unknown Issues that need to be added to a focus area (aka "needs focus"). good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team. priority: low The issue/PR is low priority—not many people are affected or there’s a workaround, etc. type: bug The issue is a confirmed bug.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Scope CSS selectors to prevent unintended page effects BurakParsAydin/woocommerce-payments
8 participants
@anu-rock @vbelolapotkov @haszari @RadoslavGeorgiev @BurakParsAydin @htdat @eason9487 @deepakpathania