Improve BNPL PMME and icon placement in shortcode checkout

[FangedParakeet]

Description

This issue is a follow-up to #9488, dividing up the work comprising this issue into individual bite-sized chunks.

This issue is to amend the placement and positioning of the BNPL PMME and payment method icon.

Acceptance criteria

Current bad state

Desired good state

In order to resolve this issue, we would like to achieve the following:

• PMME is left-aligned horizontally with the label text.
• Payment method icon is centre-aligned vertically with both label text and PMME.

Limitations

Note that we should attempt to make this placement as consistent across themes as possible, but be aware that different themes control the positioning of these radio label elements very differently. If there are limitations to what we are able to achieve, please explain the limitations on this issue with the expectation that this is part of a series of incremental changes and we should try to accomplish the best experience possible within the constraint of what is feasible.

Additional context

#9488

[FangedParakeet]

Moving this to the backlog until we have a consistent solution to add DOM elements to label in #9819.

[gpressutto5]

@pierorocca @FangedParakeet Double checking we want to to vertically center the payment method logo differently than in the Blocks Checkout.

Blocks checkout currently:

[gpressutto5]

Regarding the PMME alignment, it looks like a problem with the theme. I tested with some other themes and all of them have the PMME correctly aligned.
The text is misaligned in the Storefront theme because of the way it renders the icon that replaces the radio button. This icon is in an inline ::before.

Twenty Twenty-Five

Blockbase

aThemeArt’s Shopper

[pierorocca]

@pierorocca @FangedParakeet Double checking we want to to vertically center the payment method logo differently than in the Blocks Checkout.

Centered on all checkouts. The design called for vertical centering of the logo so the Blocks implementation, if not a theme issue, is incorrect.

[pierorocca]

I believe there's an open issue as well to reduced the font size of the second line of text which should help with the visual balance as well as amount of PMME text that can be shown before it wraps on mobile.

Having said that, what happens on shortcode in a 2 or 3 column design where the container is super narrow and the text is on 3 row and the icon is centered? How does that look?

[gpressutto5]

@pierorocca These themes I used as example are not 3 column, the only difference with them is that the PMME is correctly aligned with the label.

Now, I noticed Brett is working on a 3 column design in #9775 and I think that PR alone might close this issue. This is how it would look like in a extremely narrow container. I think it looks good, considering this is so narrow any gateway would look broken.