fix(client): align flash banner (#65946)

Co-authored-by: Vic Golding <hello@vicgolding.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>

client/src/components/Flash/flash.css

@@ -1,14 +1,20 @@
 /*
-For some reason this `div` is needed in order to overidde
+For some reason this `div` is needed in order to override
 the CSS rules of `ui-components`'s Alert.
 */
-div.flash-message {
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
-  padding-top: 3px;
-  padding-bottom: 3px;
+div.flash-container {
   position: fixed;
   width: 100%;
   z-index: var(--z-index-flash);
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+}
+div.flash-message {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  @media (max-width: 767.99px) {
+    padding: 0;
+  }
 }

client/src/components/Flash/index.tsx

@@ -1,9 +1,9 @@
 import { Alert, CloseButton, type AlertProps } from '@freecodecamp/ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { FlashState } from '../../redux/types';
 import { removeFlashMessage } from './redux';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import './flash.css';
 
@@ -27,22 +27,33 @@ function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
   }
 
   return (
-    <TransitionGroup>
-      <CSSTransition key={id} timeout={500}>
-        <Alert
-          variant={flashStyle}
-          className='flash-message'
-          data-playwright-test-label='flash-message'
-        >
-          {t(message, variables)}
-          <CloseButton
-            onClick={handleClose}
-            label={t('buttons.close')}
-            className='close'
-          />
-        </Alert>
-      </CSSTransition>
-    </TransitionGroup>
+    <Alert
+      key={id}
+      variant={flashStyle}
+      className='flash-container'
+      data-playwright-test-label='flash-message'
+    >
+      <Container>
+        <Row>
+          <Col
+            md={8}
+            mdOffset={2}
+            sm={10}
+            smOffset={1}
+            xs={12}
+            className='flash-message'
+            data-testid='flash-message-content'
+          >
+            {t(message, variables)}
+            <CloseButton
+              onClick={handleClose}
+              label={t('buttons.close')}
+              className='close'
+            />
+          </Col>
+        </Row>
+      </Container>
+    </Alert>
   );
 }