From 11eb13718403e2a1db167f24dc83f8c31841c8d7 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 10 Dec 2021 15:07:39 -0800
Subject: [PATCH] Remove viewport units

---
 src/Home.module.css      |   2 +-
 src/LoginPage.module.css |   3 +-
 src/Room.jsx             | 105 +++++++++++++++++++++------------------
 src/Room.module.css      |  24 ++++++---
 src/index.css            |   2 +-
 5 files changed, 76 insertions(+), 60 deletions(-)

diff --git a/src/Home.module.css b/src/Home.module.css
index dcf1ce2e..7abd5ba2 100644
--- a/src/Home.module.css
+++ b/src/Home.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100%;
 }
 
 .splitContainer {
diff --git a/src/LoginPage.module.css b/src/LoginPage.module.css
index 5507db5a..2834d6ab 100644
--- a/src/LoginPage.module.css
+++ b/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 {
diff --git a/src/Room.jsx b/src/Room.jsx
index e2ef36e4..53578125 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -300,57 +300,64 @@ function RoomSetupView({
         </RightNav>
       </Header>
       <div className={styles.joinRoom}>
-        <h1>New Call</h1>
-        {hasLocalParticipant && (
-          <p>Warning, you are signed into this call on another device.</p>
-        )}
-        <div className={styles.preview}>
-          {state === GroupCallState.LocalCallFeedUninitialized && (
-            <p className={styles.webcamPermissions}>
-              Webcam/microphone permissions needed to join the call.
-            </p>
-          )}
-          {state === GroupCallState.InitializingLocalCallFeed && (
-            <p className={styles.webcamPermissions}>
-              Accept webcam/microphone permissions to join the call.
-            </p>
-          )}
-          <video ref={videoRef} muted playsInline disablePictureInPicture />
-          {state === GroupCallState.LocalCallFeedInitialized && (
-            <>
-              <Button
-                className={styles.joinCallButton}
-                disabled={state !== GroupCallState.LocalCallFeedInitialized}
-                onPress={onEnter}
-              >
-                Join call now
-              </Button>
-              <div className={styles.previewButtons}>
-                <MicButton
-                  muted={microphoneMuted}
-                  onPress={toggleMicrophoneMuted}
-                />
-                <VideoButton
-                  muted={localVideoMuted}
-                  onPress={toggleLocalVideoMuted}
-                />
-                <OverflowMenu
-                  roomId={roomId}
-                  setShowInspector={setShowInspector}
-                  showInspector={showInspector}
-                  client={client}
-                />
-              </div>
-            </>
+        <div className={styles.joinRoomContent}>
+          <h1>New Call</h1>
+          {hasLocalParticipant && (
+            <p>Warning, you are signed into this call on another device.</p>
           )}
+          <div className={styles.preview}>
+            {state === GroupCallState.LocalCallFeedUninitialized && (
+              <p className={styles.webcamPermissions}>
+                Webcam/microphone permissions needed to join the call.
+              </p>
+            )}
+            {state === GroupCallState.InitializingLocalCallFeed && (
+              <p className={styles.webcamPermissions}>
+                Accept webcam/microphone permissions to join the call.
+              </p>
+            )}
+            <video ref={videoRef} muted playsInline disablePictureInPicture />
+            {state === GroupCallState.LocalCallFeedInitialized && (
+              <>
+                <Button
+                  className={styles.joinCallButton}
+                  disabled={state !== GroupCallState.LocalCallFeedInitialized}
+                  onPress={onEnter}
+                >
+                  Join call now
+                </Button>
+                <div className={styles.previewButtons}>
+                  <MicButton
+                    muted={microphoneMuted}
+                    onPress={toggleMicrophoneMuted}
+                  />
+                  <VideoButton
+                    muted={localVideoMuted}
+                    onPress={toggleLocalVideoMuted}
+                  />
+                  <OverflowMenu
+                    roomId={roomId}
+                    setShowInspector={setShowInspector}
+                    showInspector={showInspector}
+                    client={client}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+          <p>Or</p>
+          <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>
-        <p>Or</p>
-        <CopyButton value={window.location.href} className={styles.copyButton}>
-          Copy call link and join later
-        </CopyButton>
-        <Link className={styles.homeLink} to="/">
-          Take me Home
-        </Link>
       </div>
     </div>
   );
diff --git a/src/Room.module.css b/src/Room.module.css
index 2b96acaf..58363d6e 100644
--- a/src/Room.module.css
+++ b/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;
   }
diff --git a/src/index.css b/src/index.css
index 336d0bd2..f2ac11b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -129,7 +129,7 @@ body {
 html,
 body,
 #root {
-  height: 100vh;
+  height: 100%;
 }
 
 #root {