fix(client): set --header-height only if Header exists

client/src/components/Header/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
 import SearchBar from '../search/searchBar/SearchBar';
 
 import NavigationMenu from './components/NavMenu';
@@ -15,6 +16,10 @@ const propTypes = {
 function Header(props) {
   const { disableSettings } = props;
   return (
+    <>
+      <Helmet>
+        <style>{':root{--header-height: 38px}'}</style>
+      </Helmet>
       <header>
         <nav id='top-nav'>
           <Link className='home-link' to='/'>
@@ -24,6 +29,7 @@ function Header(props) {
           <NavigationMenu disableSettings={disableSettings} />
         </nav>
       </header>
+    </>
   );
 }
 

client/src/components/layouts/global.css

@@ -15,12 +15,11 @@ body {
 }
 
 .default-layout {
-  margin-top: var(--header-height);
+  margin-top: var(--header-height, 0px);
   background: var(--secondary-background);
   display: flex;
   flex-direction: column;
-  margin-top: var(--header-height);
+  min-height: calc(100vh - var(--header-height, 0px));
-  min-height: calc(100vh - var(--header-height));
 }
 
 h1 {

client/src/components/layouts/learn.css

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

client/src/components/layouts/variables.css

@@ -1,5 +1,4 @@
 :root {
-  --header-height: 38px;
   --theme-color: #0a0a23;
   --gray-00: #ffffff;
   --gray-05: #f5f6f7;

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

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