Update payment card style on mobile (https://github.com/woocommerce/woocommerce-admin/pull/6413)

* Update payment card style on mobile

* Add changelog

* Add testing instructions

* Move changelog entry to unreleased

Co-authored-by: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Update payment card style on mobile #6413
+
+- Using a small size screen, go to your WooCommerce -> Home -> Choose payment methods.
+- See that the text descriptions for payment methods have a margin between them and the edge of the screen.
+
 ### Navigation: Correct error thrown when enabling #6462
 
 1. Create a fresh store

plugins/woocommerce-admin/client/task-list/style.scss

@@ -303,13 +303,12 @@
 		.components-card__media {
 			order: 1;
 			margin-right: auto;
-			margin-bottom: $gap-large;
 		}
 
 		.components-card__footer {
 			position: absolute;
 			right: $gap-larger;
-			top: $gap-large;
+			top: $gap-smaller;
 
 			.components-form-toggle {
 				margin-top: $gap-smallest;
@@ -318,7 +317,9 @@
 
 		.components-card__body {
 			order: 3;
-			margin-top: $gap;
+			margin-right: auto;
+			margin-left: $gap-larger;
+			padding-top: $gap-smaller;
 		}
 	}
 }

plugins/woocommerce-admin/readme.txt

@@ -84,6 +84,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Dev: Deprecate Onboarding::has_woocommerce_support. #6401
 - Fix: Broken link anchors to online documentation. #6455
 - Dev: Add Dependency Extraction Webpack Plugin #5762
+- Fix: Update payment card style on mobile #6413
 - Fix: Missing i18n in Welcome modal. #6456
 
 == 2.1.0 ==