From 281baf79a8f34f9f64f925a38d9aca6c76623494 Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <64531160+JeevaRamanathan@users.noreply.github.com>
Date: Mon, 6 Nov 2023 18:30:38 +0530
Subject: [PATCH] fix(UI): Button alignment in email signup (#52132)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 client/src/pages/email-sign-up.css |  9 +++++
 client/src/pages/email-sign-up.tsx | 54 ++++++++++++++++--------------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/email-sign-up.css b/client/src/pages/email-sign-up.css
index 16a84c7e6f1..7284a34701e 100644
--- a/client/src/pages/email-sign-up.css
+++ b/client/src/pages/email-sign-up.css
@@ -3,6 +3,15 @@
   font-size: 1rem;
 }
 
+/*
+This is a temporary fix until the component library is revisited.
+See https://github.com/freeCodeCamp/freeCodeCamp/issues/52131#issuecomment-1788840851.
+*/
+.email-list-opt {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 @media (min-width: 500px) {
   .email-sign-up strong,
   .email-sign-up p {
diff --git a/client/src/pages/email-sign-up.tsx b/client/src/pages/email-sign-up.tsx
index e1fe59d4b4f..c2c01c6b73e 100644
--- a/client/src/pages/email-sign-up.tsx
+++ b/client/src/pages/email-sign-up.tsx
@@ -61,32 +61,34 @@ function EmailListOptIn({
   const { t } = useTranslation();
   if (isSignedIn) {
     return (
-      <Row>
-        <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
-          <Button
-            block={true}
-            bsSize='lg'
-            bsStyle='primary'
-            className='big-cta-btn'
-            onClick={() => acceptTerms(true)}
-          >
-            {t('buttons.yes-please')}
-          </Button>
-          <Spacer size='small' />
-        </Col>
-        <Col md={4} sm={5} xs={12}>
-          <Button
-            block={true}
-            bsSize='lg'
-            bsStyle='primary'
-            className='big-cta-btn'
-            onClick={() => acceptTerms(false)}
-          >
-            {t('buttons.no-thanks')}
-          </Button>
-          <Spacer size='small' />
-        </Col>
-      </Row>
+      <Container>
+        <Row className='email-list-opt'>
+          <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
+            <Button
+              block={true}
+              bsSize='lg'
+              bsStyle='primary'
+              className='big-cta-btn'
+              onClick={() => acceptTerms(true)}
+            >
+              {t('buttons.yes-please')}
+            </Button>
+            <Spacer size='small' />
+          </Col>
+          <Col md={4} sm={5} xs={12}>
+            <Button
+              block={true}
+              bsSize='lg'
+              bsStyle='primary'
+              className='big-cta-btn'
+              onClick={() => acceptTerms(false)}
+            >
+              {t('buttons.no-thanks')}
+            </Button>
+            <Spacer size='small' />
+          </Col>
+        </Row>
+      </Container>
     );
   } else {
     return (