From aa9ce71ae8958d8c762b786257530147d1280930 Mon Sep 17 00:00:00 2001
From: Jonas Schell <jonas@livekit.io>
Date: Thu, 12 Sep 2024 16:28:46 +0200
Subject: [PATCH] Remove fixed positioning from footer component (#325)

---
 app/rooms/[roomName]/PageClientImpl.tsx |  2 +-
 styles/Home.module.css                  |  3 ++-
 styles/globals.css                      | 13 +++++--------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/rooms/[roomName]/PageClientImpl.tsx b/app/rooms/[roomName]/PageClientImpl.tsx
index 91967dd..1bf4761 100644
--- a/app/rooms/[roomName]/PageClientImpl.tsx
+++ b/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
diff --git a/styles/Home.module.css b/styles/Home.module.css
index c777b2b..fb58774 100644
--- a/styles/Home.module.css
+++ b/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 {
diff --git a/styles/globals.css b/styles/globals.css
index 1845257..ff0c088 100644
--- a/styles/globals.css
+++ b/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;