From fb481bdce5f6072ed7f44dce3c54e7880b24706b Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:50:54 +0100
Subject: [PATCH] Increase shipping/payment borders to prevent half pixel
 issues on high-resolution screens (#46525)

* Replace pixel box shadow with em to prevent half pixels

* Add changelog

* Apply 2px border

* Make padding around shipping options bigger
---
 .../inner-blocks/checkout-shipping-methods-block/style.scss  | 2 +-
 .../packages/components/radio-control/style.scss             | 2 +-
 plugins/woocommerce/changelog/fix-half-pixel-borders         | 5 +++++
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-half-pixel-borders

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
index 04ea8833dbc..5118a1bcd8c 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
@@ -1,7 +1,7 @@
 .wc-block-checkout__shipping-option {
 	.wc-block-components-radio-control__option {
 		margin: 0;
-		padding: em($gap-small) em($gap-small) em($gap-small) em($gap-huge);
+		padding: 0.875em 0.875em 0.875em em($gap-huge);
 	}
 
 	.wc-block-components-shipping-rates-control__no-results-notice {
diff --git a/plugins/woocommerce-blocks/packages/components/radio-control/style.scss b/plugins/woocommerce-blocks/packages/components/radio-control/style.scss
index 6900bef4284..72b4305bac8 100644
--- a/plugins/woocommerce-blocks/packages/components/radio-control/style.scss
+++ b/plugins/woocommerce-blocks/packages/components/radio-control/style.scss
@@ -35,7 +35,7 @@
 	// and right of the selected element, and top and bottom of the first/last elements.
 	label.wc-block-components-radio-control__option--checked-option-highlighted,
 	.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
-		box-shadow: 0 0 0 1.5px currentColor inset;
+		box-shadow: 0 0 0 2px currentColor inset;
 		border-radius: 4px;
 	}
 
diff --git a/plugins/woocommerce/changelog/fix-half-pixel-borders b/plugins/woocommerce/changelog/fix-half-pixel-borders
new file mode 100644
index 00000000000..71c9abaad03
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-half-pixel-borders
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Fixes an issue on high-res screens. The bug was not present in any released version
+
+