Address some layout issues with odd content spacing on mobile, and footer position (#3022)

* - set vars for player container height and status bar height
- use them to calculate mobile top spacing to adjust for tab content positioning

* give main content section a min height, place footer absolutely at bottom; rm all the fixed footer styling

* cleanup; restructure tabbed display logic and css a bit

* Prettified Code!

* cleanup

* fix(story): footer story needs to be wrapped in RecoilRoot if it is to use Recoil

* revert adding footer to mobile about section

* prevent double scrolling

---------

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/layouts/Main/Main.module.scss

@@ -2,37 +2,15 @@
 
 .layout {
   // this margin is for fixed header
-  margin-top: var(--header-height);
+  padding-top: var(--header-height);
   background-color: var(--theme-color-main-background);
-  @include screen(tablet) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    // this one is for fixed footer
-    margin-bottom: 30px;
-  }
+	min-height: 100vh;
+	position: relative;
 
-  @include screen(mobile) {
-    margin-bottom: 0px;
-
-    footer {
-      display: none;
-    }
-  }
-}
-
-.fadeIn {
-  animation: fadein 0.5s;
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+	// add some spacing between the last row of content and the footer
+	:global(.ant-row) {
+		&:last-of-type {
+			margin-bottom: 5em;
+		}
+	}
 }

web/components/layouts/Main/Main.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable react/no-unescaped-entities */
 import { useRecoilValue } from 'recoil';
 import Head from 'next/head';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { Layout } from 'antd';
 import dynamic from 'next/dynamic';
 import Script from 'next/script';
@@ -32,6 +32,7 @@ import { PushNotificationServiceWorker } from '../../workers/PushNotificationSer
 import { AppStateOptions } from '../../stores/application-state';
 import { Noscript } from '../../ui/Noscript/Noscript';
 import { ServerStatus } from '../../../interfaces/server-status.model';
+import { DYNAMIC_PADDING_VALUE } from '../../../utils/constants';
 
 // Lazy loaded components
 
@@ -46,7 +47,6 @@ const FatalErrorStateModal = dynamic(
 );
 
 export const Main: FC = () => {
-  const [displayFooter, setDisplayFooter] = useState(false);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const clientStatus = useRecoilValue<ServerStatus>(serverStatusState);
   const { name } = clientConfig;
@@ -58,42 +58,16 @@ export const Main: FC = () => {
   const layoutRef = useRef<HTMLDivElement>(null);
   const { chatDisabled } = clientConfig;
   const { videoAvailable } = appState;
-  const { online, streamTitle, versionNumber: version } = clientStatus;
+  const { online, streamTitle } = clientStatus;
 
   // accounts for sidebar width when online in desktop
   const showChat = online && !chatDisabled && isChatVisible;
-  const dynamicFooterPadding = showChat && !isMobile ? '340px' : '20px';
+  const dynamicFooterPadding = showChat && !isMobile ? DYNAMIC_PADDING_VALUE : '';
 
   useEffect(() => {
     setupNoLinkReferrer(layoutRef.current);
   }, []);
 
-  const handleScroll = () => {
-    const documentHeight = document.body.scrollHeight;
-    const currentScroll = window.scrollY + window.innerHeight;
-
-    // When the user is [modifier]px from the bottom, fire the event.
-    const modifier = 10;
-    if (currentScroll + modifier > documentHeight) {
-      if (!displayFooter) {
-        setDisplayFooter(true);
-      }
-    } else {
-      // eslint-disable-next-line no-lonely-if
-      if (displayFooter) {
-        setDisplayFooter(false);
-      }
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [displayFooter]);
-
   const isProduction = process.env.NODE_ENV === 'production';
   const headerText = online ? streamTitle || name : name;
 
@@ -196,12 +170,8 @@ export const Main: FC = () => {
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
-        <div
-          style={displayFooter ? { display: 'flex' } : { display: 'none' }}
-          className={styles.fadeIn}
-        >
-          <Footer version={version} dynamicPadding={dynamicFooterPadding} />
-        </div>
+
+        {(!isMobile || !online) && <Footer dynamicPaddingValue={dynamicFooterPadding} />}
       </Layout>
       <Noscript />
     </>