revert(client): improve alert component (#48921)

Revert "fix(client): Improve alert component (#48861)"

This reverts commit 17b880020d.

client/src/components/Flash/flash.css

@@ -5,8 +5,8 @@
   margin-bottom: 0px;
   padding-top: 3px;
   padding-bottom: 3px;
+  position: fixed;
   width: 100%;
-  position: relative;
   z-index: 150;
 }
 

client/src/components/Flash/index.tsx

@@ -1,5 +1,5 @@
 import { Alert } from '@freecodecamp/react-bootstrap';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { FlashState } from '../../redux/types';
@@ -15,24 +15,45 @@ type FlashProps = {
 function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
   const { type, message, id, variables } = flashMessage;
   const { t } = useTranslation();
+  const [flashMessageHeight, setFlashMessageHeight] = useState(0);
+
+  useEffect(() => {
+    const flashMessageElem: HTMLElement | null =
+      document.querySelector('.flash-message');
+    setFlashMessageHeight(flashMessageElem?.offsetHeight || 0);
+    document.documentElement.style.setProperty(
+      '--flash-message-height',
+      `${flashMessageHeight}px`
+    );
+  }, [flashMessageHeight]);
 
   function handleClose() {
+    document.documentElement.style.setProperty('--flash-message-height', '0px');
     removeFlashMessage();
   }
 
   return (
-    <TransitionGroup>
-      <CSSTransition classNames='flash-message' key={id} timeout={500}>
-        <Alert
-          bsStyle={type}
-          className='flash-message'
-          closeLabel={t('buttons.close')}
-          onDismiss={handleClose}
-        >
-          {t(message, variables)}
-        </Alert>
-      </CSSTransition>
-    </TransitionGroup>
+    <>
+      <TransitionGroup>
+        <CSSTransition classNames='flash-message' key={id} timeout={500}>
+          <Alert
+            bsStyle={type}
+            className='flash-message'
+            closeLabel={t('buttons.close')}
+            onDismiss={handleClose}
+          >
+            {t(message, variables)}
+          </Alert>
+        </CSSTransition>
+      </TransitionGroup>
+      {flashMessage && (
+        <div
+          style={{
+            height: `${flashMessageHeight}px`
+          }}
+        />
+      )}
+    </>
   );
 }
 

client/src/components/layouts/global.css

@@ -644,10 +644,6 @@ blockquote .small {
   border-color: #31708f;
 }
 
-.alert-dismissable .close {
-  top: 0;
-}
-
 .annual-donation-alert {
   background: linear-gradient(
       -10deg,