Remove fixed positioning from footer component (#325)

app/rooms/[roomName]/PageClientImpl.tsx

@@ -63,7 +63,7 @@ export function PageClientImpl(props: {
   const handlePreJoinError = React.useCallback((e: any) => console.error(e), []);
 
   return (
-    <main data-lk-theme="default">
+    <main data-lk-theme="default" style={{ height: '100%' }}>
       {connectionDetails === undefined || preJoinChoices === undefined ? (
         <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
           <PreJoin

styles/Home.module.css

@@ -1,11 +1,12 @@
 .main {
+  position: relative;
   display: grid;
   gap: 1rem;
   justify-content: center;
   place-content: center;
   justify-items: center;
-  padding-bottom: 100px;
   overflow: auto;
+  flex-grow: 1;
 }
 
 .tabContainer {

styles/globals.css

@@ -10,17 +10,16 @@ html {
 html,
 body {
   overflow: hidden;
-}
-
-html,
-body,
-#__next,
-main {
   width: 100%;
   height: 100%;
   margin: 0px;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+}
+
 .header {
   max-width: 500px;
   padding-inline: 2rem;
@@ -43,8 +42,6 @@ main {
 }
 
 footer {
-  position: absolute;
-  bottom: 0;
   width: 100%;
   padding: 1.5rem 2rem;
   text-align: center;