diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss index f5f113d1cfb..63380eda4fa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss @@ -26,7 +26,14 @@ } @media only screen and (max-width: 480px) { - flex-direction: column; + li { + width: 100%; + + > .wc-block-order-confirmation-summary-list-item__key, + > .wc-block-order-confirmation-summary-list-item__value { + display: inline; + } + } } } .woocommerce-verify-email { diff --git a/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 b/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 new file mode 100644 index 00000000000..e1a82f3272d --- /dev/null +++ b/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 @@ -0,0 +1,4 @@ +Significance: minor +Type: tweak + +On mobile, style order confirmation page details side by side diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php index e36c1d77f74..3560292ab02 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php @@ -29,11 +29,11 @@ class Summary extends AbstractOrderConfirmationBlock { } $content = ''; return $content; diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js index 7aceae0f0fd..db105a99a48 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js @@ -114,7 +114,7 @@ test.describe( page.getByText( 'Your order has been received' ) ).toBeVisible(); await expect( - page.getByText( `Order number: ${ orderId }` ) + page.getByText( `Order #: ${ orderId }` ) ).toBeVisible(); await expect( await page.getByText( `Total: $${ productPrice }` ).count()