Fix styling on home page to be less bad

client/src/App.module.css

@@ -14,7 +14,6 @@
 }
 
 .footer {
-  bottom: 0px;
   width: 100%;
   display: block;
   text-align: center;
@@ -22,7 +21,7 @@
 }
 
 .state {
-  height: 100%;
+  flex: 1;
   width: 100%;
 }
 

client/src/components/screens/HomePage/HomePage.jsx

@@ -37,8 +37,10 @@ const HomePage = () => {
       >
         <Rejoin ref={transitionRef} />
       </CSSTransition>
-      <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)} />
-      <RecentGames />
+      <div className={styles.row}>
+        <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)} />
+        <RecentGames />
+      </div>
     </div>
   );
 };

client/src/components/screens/HomePage/HomePage.module.css

@@ -1,21 +1,26 @@
 .page {
-  box-sizing: border-box;
-  width: 100%;
   height: 100%;
-  padding-top: 20%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-items: center;
 }
 
+.row {
+  width: 80%;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
 .rejoinLabel {
   margin-bottom: 0.5em;
 }
 
 .rejoinSection {
-  top: 10%;
-  position: absolute;
+  height: 30%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
@@ -23,7 +28,6 @@
 }
 
 .recentSection {
-  margin-bottom: 2em;
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;

client/src/components/screens/HomePage/RecentGames.jsx

@@ -1,13 +1,14 @@
 import ms from "pretty-ms";
 import { dispatch } from "../../../domain/gameStore";
 import { useRecentGameInfo } from "../../../hooks/useGameInfo";
+import Loading from "../../util/Loading";
 import styles from "./HomePage.module.css";
 
 const RecentGames = () => {
   const recent = useRecentGameInfo();
 
   if (!recent || recent.length === 0) {
-    return <></>;
+    return <Loading />;
   }
 
   return (