Fix styling on payment details page in mobile view.

[shendy-a8c]

Fixes https://github.com/Automattic/woocommerce-payments/issues/7230

Changes proposed in this Pull Request

• Fix the styling of the transaction status pill to be positioned at the top and not on the right of the transaction amount.

In my local, the pill does not overflow like shown in the screenshot of the original issue.

Before:

After:

I have to re-arrange the elements. I group the transaction amount and currency and move the PaymentStatusChip and DisputeStatusChip.

I also added className prop for PaymentStatusChip and DisputeStatusChip so I can target them in CSS selector.

• Fix the styling of dispute notice link that overflow and breaks structure.

Before:

After:

Testing instructions

• Make a purchase using dispute test cards.
• Open the dispute transaction. Payments > Transactions > click on the dispute transaction.

Make sure desktop view does not change due to these PR changes.

Make sure in mobile view, the status chips is located at the top.

• Open a charge transaction. Payments > Transactions > click on a charge transaction.

Make sure desktop view does not change due to these PR changes.

Make sure in mobile view, the status chips is located at the top.

---

• [x] Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
• [x] Covered with tests (or have a good reason not to test in description ☝️)
• [x] Tested on mobile (or does not apply)

Post merge

• [ ] Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• [ ] Add or update critical flows and testing instructions for critical flows, if applicable.
• [ ] Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[botwoo]

Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 9790 or branch name fix/7230-payments-details-mobile-view in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

:rocket: Launch a JN site with this branch :rocket:

:information_source: Install this Tampermonkey script to get more options.

---

Build info:

• Latest commit: 7558e5e6803fcddea3e0160fc59b0eee1eb9bc40
• Build time: 2024-11-25 05:29:28 UTC

Note: the build is updated when a new commit is pushed to this PR.

[github-actions[bot]]

Size Change: +195 B (0%)

Total Size: 1.34 MB

Filename	Size	Change
release/woocommerce-payments/dist/index-rtl.css	52.7 kB	+76 B (0%)
release/woocommerce-payments/dist/index.css	52.6 kB	+79 B (0%)
release/woocommerce-payments/dist/index.js	303 kB	+40 B (0%)

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `release/woocommerce-payments/assets/css/admin.css` | 1.37 kB | | `release/woocommerce-payments/assets/css/admin.rtl.css` | 1.37 kB | | `release/woocommerce-payments/assets/css/success.css` | 182 B | | `release/woocommerce-payments/assets/css/success.rtl.css` | 184 B | | `release/woocommerce-payments/dist/blocks-checkout-rtl.css` | 2.66 kB | | `release/woocommerce-payments/dist/blocks-checkout.css` | 2.66 kB | | `release/woocommerce-payments/dist/blocks-checkout.js` | 54.3 kB | | `release/woocommerce-payments/dist/cart-block.js` | 16.8 kB | | `release/woocommerce-payments/dist/cart.js` | 5.73 kB | | `release/woocommerce-payments/dist/checkout-rtl.css` | 1.23 kB | | `release/woocommerce-payments/dist/checkout.css` | 1.23 kB | | `release/woocommerce-payments/dist/checkout.js` | 33 kB | | `release/woocommerce-payments/dist/express-checkout-rtl.css` | 229 B | | `release/woocommerce-payments/dist/express-checkout.css` | 229 B | | `release/woocommerce-payments/dist/express-checkout.js` | 14.9 kB | | `release/woocommerce-payments/dist/frontend-tracks.js` | 854 B | | `release/woocommerce-payments/dist/multi-currency-analytics.js` | 1.08 kB | | `release/woocommerce-payments/dist/multi-currency-rtl.css` | 4.46 kB | | `release/woocommerce-payments/dist/multi-currency-switcher-block.js` | 60.6 kB | | `release/woocommerce-payments/dist/multi-currency.css` | 4.46 kB | | `release/woocommerce-payments/dist/multi-currency.js` | 57.3 kB | | `release/woocommerce-payments/dist/order-rtl.css` | 730 B | | `release/woocommerce-payments/dist/order.css` | 730 B | | `release/woocommerce-payments/dist/order.js` | 42 kB | | `release/woocommerce-payments/dist/payment-gateways-rtl.css` | 1.32 kB | | `release/woocommerce-payments/dist/payment-gateways.css` | 1.32 kB | | `release/woocommerce-payments/dist/payment-gateways.js` | 38.4 kB | | `release/woocommerce-payments/dist/plugins-page-rtl.css` | 386 B | | `release/woocommerce-payments/dist/plugins-page.css` | 386 B | | `release/woocommerce-payments/dist/plugins-page.js` | 20.1 kB | | `release/woocommerce-payments/dist/product-details-rtl.css` | 433 B | | `release/woocommerce-payments/dist/product-details.css` | 436 B | | `release/woocommerce-payments/dist/product-details.js` | 12.1 kB | | `release/woocommerce-payments/dist/settings-rtl.css` | 11.6 kB | | `release/woocommerce-payments/dist/settings.css` | 11.5 kB | | `release/woocommerce-payments/dist/settings.js` | 224 kB | | `release/woocommerce-payments/dist/subscription-edit-page.js` | 703 B | | `release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css` | 524 B | | `release/woocommerce-payments/dist/subscription-product-onboarding-modal.css` | 524 B | | `release/woocommerce-payments/dist/subscription-product-onboarding-modal.js` | 20.2 kB | | `release/woocommerce-payments/dist/subscription-product-onboarding-toast.js` | 730 B | | `release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css` | 120 B | | `release/woocommerce-payments/dist/subscriptions-empty-state.css` | 120 B | | `release/woocommerce-payments/dist/subscriptions-empty-state.js` | 19.3 kB | | `release/woocommerce-payments/dist/tokenized-express-checkout-rtl.css` | 229 B | | `release/woocommerce-payments/dist/tokenized-express-checkout.css` | 229 B | | `release/woocommerce-payments/dist/tokenized-express-checkout.js` | 16.1 kB | | `release/woocommerce-payments/dist/tos-rtl.css` | 235 B | | `release/woocommerce-payments/dist/tos.css` | 235 B | | `release/woocommerce-payments/dist/tos.js` | 21.8 kB | | `release/woocommerce-payments/dist/woopay-direct-checkout.js` | 6.13 kB | | `release/woocommerce-payments/dist/woopay-express-button.js` | 24.5 kB | | `release/woocommerce-payments/dist/woopay-rtl.css` | 4.52 kB | | `release/woocommerce-payments/dist/woopay.css` | 4.49 kB | | `release/woocommerce-payments/dist/woopay.js` | 71.6 kB | | `release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css` | 625 B | | `release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js` | 814 B | | `release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js` | 2.46 kB | | `release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js` | 767 B | | `release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js` | 553 B | | `release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js` | 1.02 kB | | `release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js` | 69 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js` | 163 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css` | 2.45 kB | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js` | 14.2 kB | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css` | 2.45 kB | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css` | 198 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js` | 280 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css` | 198 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css` | 625 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js` | 333 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css` | 626 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js` | 417 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js` | 521 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js` | 584 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css` | 215 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js` | 521 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css` | 721 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js` | 412 B | | `release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js` | 621 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css` | 1.04 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css` | 294 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css` | 408 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css` | 3.59 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css` | 301 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css` | 746 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css` | 574 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css` | 414 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js` | 543 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js` | 9.4 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js` | 6.78 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js` | 3.84 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js` | 545 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js` | 2.52 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js` | 22.2 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js` | 11.7 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js` | 1.29 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js` | 507 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js` | 358 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js` | 428 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js` | 1.38 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js` | 782 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js` | 1.09 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js` | 1.26 kB | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css` | 391 B | | `release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js` | 3.04 kB |

_{compressed-size-action}