fix(UI): Button alignment in email signup

[JeevaRamanathan]

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #52131

The change involves fixing the misalignment of the button in the email sign up page.
Screenshots:

[ghost]

👀 Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[huyenltnguyen]

@JeevaRamanathan The CI failure has been resolved and the fix was merged into main, so please help update your branch with the latest main 🙂

[huyenltnguyen]

@JeevaRamanathan thank you for the PR and for bearing with me!

I've tested locally using the combination of Row and Col from both ui-components and @freecodecamp/react-bootstrap, and I didn't see a gap between the footer and the edge of the screen.

Here is the result (tested on both Chrome and Firefox):

Desktop	Mobile

With that, I updated the PR to switch back to the Row component. Let's wait for another maintainer to help us test and give the final verdict 😄

[JeevaRamanathan]

@huyenltnguyen Sorry for dragging this conversation further😅, but I still have a doubt that I'd like to clarify.
So in the screenshot that you have shared above, if you see that profile icon it's partially hidden which is also causing that space in the footer.

And if you see the below screenshot (settings screen), its having equal margins on save button and also profile icon is clearly visible.
.

So is that expected to have no margins in Yes/No button in email-sign-up screen or could you please clarify?

[huyenltnguyen]

Okay, you got me. I noticed the profile image cutoff / horizontal scroll, too. But I believe it has been like that for a while (I got the same issue when tried using the bootstrap components), so I didn't want to address that in this PR to avoid scope creep.

Now that you mentioned it, I went ahead and fixed the issue by wrapping the button block inside a Container, which helps cancel out the negative margins. Whether this is necessary or not will be determined when we revisit the component library, but this is currently how the other pages / most of the pages are implemented.

Screenshots of the result (tested on Chrome and Firefox):

Desktop	Mobile