[GlobalStep - WooCommerce 4.8 RC 1] For "Twenty Twenty One" theme, radio buttons under credit card option appears misaligned on checkout page.

[gglobalstep]

Bug Description:

For "Twenty Twenty One" theme, radio buttons under credit card option appears misaligned on checkout page.

Environment:

Windows 10, macOS Catalina: v10.15.7 (19H15) Browser: Chrome(Version 87.0.4240.75 (64-bit)) Firefox(Version 83.0)(64-bit) Safari(Version 14.0)(15610.1.28.1.9, 15610)

Steps To Reproduce:

1. Create any test site using Jurassic Ninja.
2. Install and activate all required plugins.
3. Complete the Onboarding setup wizard.
4. Select Twenty Twenty One theme.
5. Go to frontend.
6. Add any product to the Cart.
7. Go to Checkout page.
8. Click on Credit card payment option.
9. Observe that radio buttons appears misaligned

Actual Result:

For "Twenty Twenty One" theme, radio buttons under credit card option appears misaligned on checkout page.

Expected Result:

Radio button should be properly aligned on checkout page.

Artifacts:

Isolating the problem (mark completed items with an [x]):

• [ ] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• [ ] This bug happens with a default WordPress theme active, or Storefront.
• [x] I can reproduce this bug consistently using the steps above.

[juliaamosova]

Hi @gglobalstep,

Thank you for reporting the issue. I can reproduce it as well:

The issue is caused by the WooCommerce Stripe plugin which being developed in another repository: https://github.com/woocommerce/woocommerce-gateway-stripe.

I am going to move your bug report there so that the right team could take a look further.