improv ui: make footer sit at bottom (#2212)

This commit makes the footer always attach to the bottom of the screen.
This is done by setting the minWidth of the main antd layout component
to 100vh and moving the footer component outside the spinner, since antd
does not allow granular component inside the spin component.

This commit also removes some styles which were not being used due to
invalid antd api.

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/layouts/Main.tsx

@@ -77,7 +77,7 @@ export const Main: FC = () => {
       </Head>
 
       <ClientConfigStore />
-      <Layout ref={layoutRef}>
+      <Layout ref={layoutRef} style={{ minHeight: '100vh' }}>
         <Header name={title || name} chatAvailable={isChatAvailable} chatDisabled={chatDisabled} />
         <Content />
         {fatalError && (

web/components/ui/Content/Content.module.scss

@@ -24,8 +24,12 @@
 }
 
 .loadingSpinner {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  z-index: 999999;
+  display: grid;
+}
+
+.main {
+  display: grid;
+  flex: 1;
+  height: 100%;
+  grid-template-rows: 1fr auto;
 }

web/components/ui/Content/Content.tsx

@@ -212,8 +212,8 @@ export const Content: FC = () => {
   const showChat = !chatDisabled && isChatAvailable && isChatVisible;
 
   return (
-    <div>
-      <Spin className={styles.loadingSpinner} size="large" spinning={appState.appLoading}>
+    <div className={styles.main}>
+      <Spin wrapperClassName={styles.loadingSpinner} size="large" spinning={appState.appLoading}>
         <AntContent className={styles.root}>
           <div className={styles.leftContent}>
             <div className={styles.topSection}>
@@ -286,8 +286,8 @@ export const Content: FC = () => {
           </div>
           {showChat && !isMobile && <Sidebar />}
         </AntContent>
-        {(!isMobile || !showChat) && <Footer version={version} />}
       </Spin>
+      {(!isMobile || !showChat) && <Footer version={version} />}
     </div>
   );
 };