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

[GlobalStep] Columns are misaligned on Payments->Transactions/Disputes page #1719

Closed
1 of 3 tasks
gglobalstep opened this issue May 4, 2021 · 2 comments · Fixed by #1742 or #1838
Closed
1 of 3 tasks

[GlobalStep] Columns are misaligned on Payments->Transactions/Disputes page #1719

gglobalstep opened this issue May 4, 2021 · 2 comments · Fixed by #1742 or #1838
Assignees
@naman03malhotra
Labels
component: disputes Issues related to Disputes component: transactions Issues related to Transactions size: small The issue is sized small. type: bug The issue is a confirmed bug.

Comments

@gglobalstep
Copy link

gglobalstep commented May 4, 2021 •
edited
Loading

Bug Description:

"Fees/Net/Order#/Source/Deposit" columns are misaligned on "Payments->Transactions" page
"Status/Reason/Order #/Source/Respond by "columns are misaligned on "Payments->Disputes" page

Environment:

Woocommerce Version : WooCommerce 5.2.2
WooCommerce Payments: v2.4.0
WooCommerce Subscriptions: v3.0.12
WordPress version: (v5.7)

PC:
Windows 10, Mac 10.14.6
Chrome(Version 90.0.4430.93)
Firefox(Version 87.0)
Safari: v13.1.1

Steps To Reproduce:

  1. Create any test site using JN site.
  2. Install and activate all the required plugins
  3. Complete the onboarding setup wizard setup
  4. Go to Plugins->Add New and upload the zip files for WooCommerce Payments v2.4.0 plugin
  5. Activate WooCommerce Payments v2.4.0
  6. Complete the wooCommerce Payments setup
  7. Complete "Get ready to start selling" section on WooCommerce->Home Page
  8. Purchase products from front-end
  9. Go to WooCommerce->Orders page and check all the orders are with "Processing" status
  10. Go to the "Payments->Transactions" page
  11. Note that "Fees/Net/Order#/Source/Deposit'" columns are misaligned on the "Payments->Transactions" page
  12. Go to the "Payments->Disputes" page
  13. Observe that "Status/Reason/Order #/Source/Respond by "columns are misaligned on "Payments->Disputes" page

Actual Result:

Columns are misaligned on Payments->Transactions/Disputes page

Expected Result:

Columns should be properly aligned on the Payments->Transactions/Disputes page

ScreenShot:

#1719_Disputes
#1719_Transactions

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.
@naman03malhotra
Copy link
Contributor

naman03malhotra commented May 5, 2021 •
edited
Loading

Thanks, @gglobalstep for reporting this.

I took a closer look at this, and some items are misaligned, to fix this I'll align the table items in the center except the numeric values (cost and fees) which should be right-aligned as they are more readable that way.

@naman03malhotra naman03malhotra added component: disputes Issues related to Disputes component: transactions Issues related to Transactions priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue is a confirmed bug. and removed priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. labels May 6, 2021
@naman03malhotra naman03malhotra mentioned this issue May 6, 2021
Merged
3 tasks
@vbelolapotkov vbelolapotkov added the size: small The issue is sized small. label May 7, 2021
@gglobalstep
Copy link
Author

gglobalstep commented May 11, 2021 •
edited
Loading

The same issue is observed on the "Payments->Deposits" Page as well

Environment:
Woocommerce Version : WooCommerce 5.2.2 and 5.3 RC 2
WooCommerce Payments: v2.4.0-test-3
WordPress version: (v5.7)

PC:
Windows 10, Mac 10.14.6
Chrome(Version 90.0.4430.93)
Firefox(Version 87.0)
Safari: v13.1.1

Attachment:
Screen Shot 2021-05-11 at 6 37 44 PM

@naman03malhotra naman03malhotra mentioned this issue May 17, 2021
Merged
3 tasks
naman03malhotra added a commit that referenced this issue May 19, 2021
@naman03malhotra
Fix: Columns are misaligned on Payments->Deposits (#1838)
4fde9a7 
* Fix: #1719 Misaligned columns on Payments->Deposits
- override alignment for deposits list page.
- slight adjustment in transaction table header margin.
- changelog update.
- updated failing snapshots.
- Review changes.
- Aligned data with currency conversion marker.
ismaeldcom pushed a commit that referenced this issue May 27, 2021
@naman03malhotra @ismaeldcom
Fix: Columns are misaligned on Payments->Deposits (#1838)
f9828fc 
* Fix: #1719 Misaligned columns on Payments->Deposits
- override alignment for deposits list page.
- slight adjustment in transaction table header margin.
- changelog update.
- updated failing snapshots.
- Review changes.
- Aligned data with currency conversion marker.
ismaeldcom pushed a commit that referenced this issue May 27, 2021
@naman03malhotra @ismaeldcom
Fix: Columns are misaligned on Payments->Deposits (#1838)
66a0261 
* Fix: #1719 Misaligned columns on Payments->Deposits
- override alignment for deposits list page.
- slight adjustment in transaction table header margin.
- changelog update.
- updated failing snapshots.
- Review changes.
- Aligned data with currency conversion marker.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@naman03malhotra naman03malhotra

Labels
component: disputes Issues related to Disputes component: transactions Issues related to Transactions size: small The issue is sized small. type: bug The issue is a confirmed bug.
Projects
None yet
Milestone
No milestone
3 participants
@vbelolapotkov @naman03malhotra @gglobalstep