Commit 9a5a220b47 for woocommerce
commit 9a5a220b4708cbb6b70d12d4a5535c055ecf8999
Author: Peter Viszt <info@visztpeter.me>
Date: Fri Jan 9 13:35:59 2026 +0100
Improved Shipping Method block alignment and mobile responsiveness (#62610)
* Enable flex-wrap for shipping method container
* Add changefile(s) from automation for the following project(s): woocommerce
---------
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/62610-trunk b/plugins/woocommerce/changelog/62610-trunk
new file mode 100644
index 0000000000..29a0963d07
--- /dev/null
+++ b/plugins/woocommerce/changelog/62610-trunk
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improved Shipping Method block alignment and mobile responsiveness when shipping method titles are long.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
index b816e0da11..1f02b734ff 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
@@ -3,11 +3,11 @@ $component-background-hover: color-mix(in srgb, currentColor 12%, transparent);
.wc-block-checkout__shipping-method
.wc-block-checkout__shipping-method-container {
- width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-direction: row;
+ flex-wrap: wrap;
border-radius: $universal-border-radius * 2;
background-color: $component-background;
gap: $gap-smallest;