feat(client): add space for flash message (#38327)

client/src/components/Flash/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Alert } from '@freecodecamp/react-bootstrap';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
@@ -7,14 +7,44 @@ import './flash.css';
 
 function Flash({ flashMessage, onClose }) {
   const { type, message, id } = flashMessage;
+  const [flashMessageHeight, setFlashMessageHeight] = useState(null);
+
+  useEffect(() => {
+    setFlashMessageHeight(
+      document.querySelector('.flash-message').offsetHeight
+    );
+    document.documentElement.style.setProperty(
+      '--flash-message-height',
+      flashMessageHeight + 'px'
+    );
+  }, [flashMessageHeight]);
+
+  function handleClose() {
+    document.documentElement.style.setProperty('--flash-message-height', '0px');
+    onClose();
+  }
+
   return (
-    <TransitionGroup>
+    <>
-      <CSSTransition classNames='flash-message' key={id} timeout={500}>
+      <TransitionGroup>
-        <Alert bsStyle={type} className='flash-message' onDismiss={onClose}>
+        <CSSTransition classNames='flash-message' key={id} timeout={500}>
-          {message}
+          <Alert
-        </Alert>
+            bsStyle={type}
-      </CSSTransition>
+            className='flash-message'
-    </TransitionGroup>
+            onDismiss={handleClose}
+          >
+            {message}
+          </Alert>
+        </CSSTransition>
+      </TransitionGroup>
+      {flashMessage && (
+        <div
+          style={{
+            height: flashMessageHeight + 'px'
+          }}
+        ></div>
+      )}
+    </>
   );
 }
 

client/src/components/layouts/learn.css

@@ -1,5 +1,7 @@
 #learn-app-wrapper .desktop-layout {
-  height: calc(100vh - var(--header-height, 0px));
+  height: calc(
+    100vh - var(--header-height, 0px) - var(--flash-message-height, 0px)
+  );
 }
 
 #learn-app-wrapper .reflex-container.vertical > .reflex-splitter,

client/src/templates/Challenges/classic/classic.css

@@ -32,7 +32,9 @@
 }
 
 #challenge-page-tabs .tab-content {
-  height: calc(100vh - var(--header-height, 0px) - 69px);
+  height: calc(
+    100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 69px
+  );
   overflow-y: auto;
 }