From 00347ff8bfa401b73013b8167de507d1a8f62bae Mon Sep 17 00:00:00 2001
From: Jacob Robinson <39199632+jakethecoder95@users.noreply.github.com>
Date: Mon, 16 Mar 2020 22:37:42 -0700
Subject: [PATCH] feat(client): add space for flash message (#38327)

---
 client/src/components/Flash/index.js          | 46 +++++++++++++++----
 client/src/components/layouts/learn.css       |  4 +-
 .../templates/Challenges/classic/classic.css  |  4 +-
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Flash/index.js b/client/src/components/Flash/index.js
index 2996487f4f..6628ba3b4b 100644
--- a/client/src/components/Flash/index.js
+++ b/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}>
-        <Alert bsStyle={type} className='flash-message' onDismiss={onClose}>
-          {message}
-        </Alert>
-      </CSSTransition>
-    </TransitionGroup>
+    <>
+      <TransitionGroup>
+        <CSSTransition classNames='flash-message' key={id} timeout={500}>
+          <Alert
+            bsStyle={type}
+            className='flash-message'
+            onDismiss={handleClose}
+          >
+            {message}
+          </Alert>
+        </CSSTransition>
+      </TransitionGroup>
+      {flashMessage && (
+        <div
+          style={{
+            height: flashMessageHeight + 'px'
+          }}
+        ></div>
+      )}
+    </>
   );
 }
 
diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css
index c63f8caf68..e5a6b083c4 100644
--- a/client/src/components/layouts/learn.css
+++ b/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,
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 9476078fe0..bdb5e322ce 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/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;
 }