From fdc0272940e24c96c1bd4d510e22ff530eff3418 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 26 Sep 2022 20:31:52 -0400
Subject: [PATCH] Show a reduced set of controls when the window is narrow

---
 src/room/InCallView.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index cc40c1b..fd987e6 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -215,7 +215,7 @@ export function InCallView({
   // window is too small to show everyone
   const maximisedParticipant = useMemo(
     () =>
-      fullscreenParticipant ?? (bounds.height <= 500 && bounds.width <= 500)
+      fullscreenParticipant ?? (bounds.height <= 400 && bounds.width <= 400)
         ? items.find((item) => item.focused) ??
           items.find((item) => item.callFeed) ??
           null
@@ -223,6 +223,8 @@ export function InCallView({
     [fullscreenParticipant, bounds, items]
   );
 
+  const reducedControls = bounds.width <= 400;
+
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
       const avatarUrl = roomMember.user?.avatarUrl;
@@ -325,13 +327,13 @@ export function InCallView({
       <div className={styles.footer}>
         <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
         <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        {canScreenshare && !isSafari && !maximisedParticipant && (
+        {canScreenshare && !isSafari && !reducedControls && (
           <ScreenshareButton
             enabled={isScreensharing}
             onPress={toggleScreensharing}
           />
         )}
-        {!maximisedParticipant && (
+        {!reducedControls && (
           <OverflowMenu
             inCall
             roomIdOrAlias={roomIdOrAlias}