Move footer to not be sticky. Closes #2288

web/components/layouts/Main.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-unescaped-entities */
 import { Layout } from 'antd';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import Head from 'next/head';
 import { FC, useEffect, useRef } from 'react';
 import {
@@ -9,7 +9,6 @@ import {
   isChatAvailableSelector,
   clientConfigStateAtom,
   fatalErrorStateAtom,
-  isMobileAtom,
 } from '../stores/ClientConfigStore';
 import { Content } from '../ui/Content/Content';
 import { Header } from '../ui/Header/Header';
@@ -20,13 +19,11 @@ import setupNoLinkReferrer from '../../utils/no-link-referrer';
 import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
 import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
 
-import Footer from '../ui/Footer/Footer';
 import { Theme } from '../theme/Theme';
 
 export const Main: FC = () => {
-  const [isMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { name, title, customStyles, version } = clientConfig;
+  const { name, title, customStyles } = clientConfig;
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
 
@@ -119,7 +116,6 @@ export const Main: FC = () => {
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
-        {!isMobile && <Footer version={version} />}
       </Layout>
     </>
   );

web/components/ui/Content/Content.tsx

@@ -382,6 +382,7 @@ export const Content: FC = () => {
                   setShowFollowModal={setShowFollowModal}
                 />
               )}
+              <Footer version={version} />
             </div>
             {showChat && !isMobile && <Sidebar />}
           </AntContent>

web/components/ui/CustomPageContent/CustomPageContent.tsx

@@ -1,25 +1,13 @@
 /* eslint-disable react/no-danger */
 import { FC } from 'react';
-import { useRecoilValue } from 'recoil';
-import Footer from '../Footer/Footer';
 import styles from './CustomPageContent.module.scss';
-import { isMobileAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
-import { ClientConfig } from '../../../interfaces/client-config.model';
 
 export type CustomPageContentProps = {
   content: string;
 };
 
-export const CustomPageContent: FC<CustomPageContentProps> = ({ content }) => {
-  const isMobile = useRecoilValue<boolean | undefined>(isMobileAtom);
-  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { version } = clientConfig;
-  return (
-    <>
-      <div className={styles.pageContentContainer}>
-        <div className={styles.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
-      </div>
-      {isMobile && <Footer version={version} />}
-    </>
-  );
-};
+export const CustomPageContent: FC<CustomPageContentProps> = ({ content }) => (
+  <div className={styles.pageContentContainer}>
+    <div className={styles.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
+  </div>
+);

web/styles/globals.scss

@@ -11,7 +11,7 @@
   --module-spacing: 12px; // margin size between lines of stuff, if needed
   --header-height: 4rem; // needed for making main content scrollable;
   --footer-height: 2.5rem; // needed for making main content scrollable;
-  --content-height: calc(100vh - var(--header-height) - var(--footer-height));
+  --content-height: calc(100vh - var(--header-height));
 }
 
 ::selection {