fix margin in guest checkout

[bouaik]

What? Why?

• Closes [Checkout, Mobile] No margin around buttons 'Login' and 'Checkout as guest' #11042

What should we test?

As per issue.

Release notes

Changelog Category: Technical changes
(DC: I chose technical because the change shouldn't have any effect on users other than looking slightly different)

The title of the pull request will be included in the release notes.

[mkllnk]

The CSS change looks good. A screenshot would have been helpful.

[dacook]

Thank you and welcome!

I took a look into this because I noticed that this CSS affects both the logged-in and guest views, but the issue says the problem is only on guest.

I discovered that the HTML for logged-in view is using our grid css classes (eg parent row and small-12 columns), and the guest view intends to but is broken (it's missing a parent row and the columns class).
Would you be able to have a go at fixing it that way instead? This would improve the layout on larger screens also.

Logged in:

Guest:

[bouaik]

I used the same logic like in logged in checkout form, i wanted the use the classes in the edit template but i don't want to mess the divs of the stimulus tatgets

[dacook]

This looks good, thank you!

It will now be checked by a tester before merging. @drummer83 would you like to pick this up?

[drummer83]

Hi @bouaik,
Thanks for working on this issue! 💪
I did a test of this one and here is what I found.

Before staging the PR

• Buttons 'Login' and 'Checkout as guest' have no margin ❌
  
• Buttons 'Next - Payment method' and 'Back to Edit basket' have a margin ✔️
  

After staging the PR

• Buttons 'Login' and 'Checkout as guest' have a margin ✔️
  
• Buttons 'Next - Payment method' and 'Back to Edit basket' have a margin ✔️
  
• I also confirmed that checkout remains unaffected by these changes. ✔️

Excellent work! This is ready for merging! 🚀 🥳
Thanks again!