Commit a2aac2df4e2 for woocommerce
commit a2aac2df4e2c950d0a50e43e761055d0539f9460
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Thu Apr 9 09:51:12 2026 -0400
Fix express payment button spacing in Safari on block cart (#64074)
* Fix excessive express payment button spacing in Safari on block cart
Switch the cart's express payment button list from block layout with
padding-bottom to flexbox with explicit gap, and collapse iframe
inline element line boxes with font-size/line-height: 0 to eliminate
Safari's baseline gap on replaced elements.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Add changefile(s) from automation for the following project(s): woocommerce
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/64074-wooplug-6512-block-cart-express-payment-buttons-have-excessive-spacing-in b/plugins/woocommerce/changelog/64074-wooplug-6512-block-cart-express-payment-buttons-have-excessive-spacing-in
new file mode 100644
index 00000000000..6733fc81c28
--- /dev/null
+++ b/plugins/woocommerce/changelog/64074-wooplug-6512-block-cart-express-payment-buttons-have-excessive-spacing-in
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix excessive express payment button spacing in Safari on the block cart page by switching from block layout to flexbox with explicit gap.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
index 16b83dd8fc6..496d2b5eea6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
@@ -122,15 +122,18 @@ $border-width: 1px;
.wc-block-components-express-payment--cart {
.wc-block-components-express-payment__event-buttons {
+ display: flex;
+ flex-direction: column;
+ gap: $gap-small;
+
> div,
> li {
- padding-bottom: $gap-small;
+ margin: 0;
+ padding: 0;
text-align: center;
width: 100%;
-
- &:last-child {
- padding-bottom: 0;
- }
+ font-size: 0;
+ line-height: 0;
}
}
}