Remove viewport units

src/Home.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100%;
 }
 
 .splitContainer {

src/LoginPage.module.css

@@ -8,6 +8,7 @@
   flex-direction: column;
   align-items: center;
   padding: 0 20px;
+  height: 100%;
 }
 
 .content {
@@ -15,7 +16,7 @@
   flex-direction: column;
   max-width: 400px;
   width: 100%;
-  height: 100vh;
+  min-height: 100%;
 }
 
 .formContainer {

src/Room.jsx

@@ -300,6 +300,7 @@ function RoomSetupView({
         </RightNav>
       </Header>
       <div className={styles.joinRoom}>
+        <div className={styles.joinRoomContent}>
           <h1>New Call</h1>
           {hasLocalParticipant && (
             <p>Warning, you are signed into this call on another device.</p>
@@ -345,14 +346,20 @@ function RoomSetupView({
             )}
           </div>
           <p>Or</p>
-        <CopyButton value={window.location.href} className={styles.copyButton}>
+          <CopyButton
+            value={window.location.href}
+            className={styles.copyButton}
+          >
             Copy call link and join later
           </CopyButton>
+        </div>
+        <div className={styles.joinRoomFooter}>
           <Link className={styles.homeLink} to="/">
             Take me Home
           </Link>
         </div>
       </div>
+    </div>
   );
 }
 

src/Room.module.css

@@ -18,13 +18,14 @@ limitations under the License.
   position: relative;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
   overflow: hidden;
+  min-height: 100%;
 }
 
 .inRoom {
-  width: 100vw;
+  position: fixed;
+  height: 100%;
+  width: 100%;
 }
 
 .joinRoom {
@@ -33,7 +34,18 @@ limitations under the License.
   align-items: center;
   flex: 1;
   overflow: hidden;
-  margin-bottom: 20px;
+  height: 100%;
+}
+
+.joinRoomContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.joinRoomFooter {
+  margin: 20px 0;
 }
 
 .homeLink {
@@ -139,10 +151,6 @@ limitations under the License.
 }
 
 @media (min-width: 800px) {
-  .room {
-    position: fixed;
-  }
-
   .roomContainer {
     flex-direction: row;
   }

src/index.css

@@ -129,7 +129,7 @@ body {
 html,
 body,
 #root {
-  height: 100vh;
+  height: 100%;
 }
 
 #root {