Rejoin form is now absolute positioned to fix weird widescreen behavior

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

@@ -26,7 +26,7 @@ export default () => {
       <CSSTransition in={hasSavedInfo} mountOnEnter unmountOnExit timeout={500} classNames="fade">
         <Rejoin />
       </CSSTransition>
-      <div className={styles.form}><GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} /></div>
+      <GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} />
     </div>
   );
 }

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

@@ -3,20 +3,18 @@
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
 }
 
-.form {
-  margin-bottom: 40%;
-  margin-top: 30%;
-}
-
 .rejoinLabel {
   margin-bottom: 0.5em;
 }
 
 .rejoinSection {
+  top: 20%;
+  position: absolute;
+  flex: 1;
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;