From 3cc8e0485c8c190595c2c0ae938d174b1e1895da Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
Date: Wed, 4 Jan 2023 17:32:03 +0530
Subject: [PATCH] revert(client): improve alert component (#48921)

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

This reverts commit 17b880020dc8c766a5e0fb301b253239240a197d.
---
 client/src/components/Flash/flash.css    |  2 +-
 client/src/components/Flash/index.tsx    | 47 +++++++++++++++++-------
 client/src/components/layouts/global.css |  4 --
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Flash/flash.css b/client/src/components/Flash/flash.css
index b5db768e3ef..6bb0f492d68 100644
--- a/client/src/components/Flash/flash.css
+++ b/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;
 }
 
diff --git a/client/src/components/Flash/index.tsx b/client/src/components/Flash/index.tsx
index e753212cf45..6accd829365 100644
--- a/client/src/components/Flash/index.tsx
+++ b/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`
+          }}
+        />
+      )}
+    </>
   );
 }
 
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index aa638bfb0b1..4029c81b4bf 100644
--- a/client/src/components/layouts/global.css
+++ b/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,