From 77aff4f829e7ffbc7d8eb20e455af56e210ac672 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 10 Dec 2021 14:44:04 -0800
Subject: [PATCH] Fix in-room overflow

---
 src/Room.jsx        | 35 +++++++++++++++++------------------
 src/Room.module.css |  5 ++++-
 src/index.css       |  2 +-
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/Room.jsx b/src/Room.jsx
index 5211f70..e2ef36e 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -49,6 +49,7 @@ import * as Sentry from "@sentry/react";
 import { OverflowMenu } from "./OverflowMenu";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { UserMenu } from "./UserMenu";
+import classNames from "classnames";
 
 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -128,14 +129,12 @@ export function GroupCall({ client }) {
   }
 
   return (
-    <div className={styles.room}>
-      <GroupCallView
-        client={client}
-        roomId={roomId}
-        groupCall={groupCall}
-        simpleGrid={simpleGrid}
-      />
-    </div>
+    <GroupCallView
+      client={client}
+      roomId={roomId}
+      groupCall={groupCall}
+      simpleGrid={simpleGrid}
+    />
   );
 }
 
@@ -187,14 +186,14 @@ export function GroupCallView({ client, roomId, groupCall, simpleGrid }) {
 
   if (error) {
     return (
-      <>
+      <div className={styles.room}>
         <Header>
           <LeftNav>
             <HeaderLogo />
           </LeftNav>
         </Header>
         <ErrorModal error={error} />
-      </>
+      </div>
     );
   } else if (state === GroupCallState.Entered) {
     return (
@@ -245,21 +244,21 @@ export function GroupCallView({ client, roomId, groupCall, simpleGrid }) {
 
 export function LoadingRoomView() {
   return (
-    <>
+    <div className={styles.room}>
       <div className={styles.centerMessage}>
         <p>Loading room...</p>
       </div>
-    </>
+    </div>
   );
 }
 
 export function EnteringRoomView() {
   return (
-    <>
+    <div className={styles.room}>
       <div className={styles.centerMessage}>
         <p>Entering room...</p>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -288,7 +287,7 @@ function RoomSetupView({
   }, [onInitLocalCallFeed]);
 
   return (
-    <>
+    <div className={styles.room}>
       <Header>
         <LeftNav>
           <RoomSetupHeaderInfo
@@ -353,7 +352,7 @@ function RoomSetupView({
           Take me Home
         </Link>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -428,7 +427,7 @@ function InRoomView({
   );
 
   return (
-    <>
+    <div className={classNames(styles.room, styles.inRoom)}>
       <Header>
         <LeftNav>
           <RoomHeaderInfo roomName={roomName} />
@@ -474,6 +473,6 @@ function InRoomView({
         groupCall={groupCall}
         show={showInspector}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/Room.module.css b/src/Room.module.css
index 0641f4a..2b96aca 100644
--- a/src/Room.module.css
+++ b/src/Room.module.css
@@ -18,12 +18,15 @@ limitations under the License.
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 100vw;
   min-height: 100vh;
   min-height: -webkit-fill-available;
   overflow: hidden;
 }
 
+.inRoom {
+  width: 100vw;
+}
+
 .joinRoom {
   display: flex;
   flex-direction: column;
diff --git a/src/index.css b/src/index.css
index f2ac11b..336d0bd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -129,7 +129,7 @@ body {
 html,
 body,
 #root {
-  height: 100%;
+  height: 100vh;
 }
 
 #root {