From d2631a3e0201c7e5338f9b3508a548b0f60fe477 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2023 17:52:02 +0000
Subject: [PATCH] Fix the rageshake modal on mobile

As per comment

Unsure if this is the best fix - ideally we wouldn't go into no-controls
mode at all, but this part doesn't know whether the dialog is open so
the only thing we could really do is tweak the threshold, or possibly
guess based on width instead?
---
 src/room/PTTCallView.tsx | 60 ++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx
index 08836d0..a25f337 100644
--- a/src/room/PTTCallView.tsx
+++ b/src/room/PTTCallView.tsx
@@ -210,36 +210,36 @@ export const PTTCallView: React.FC<Props> = ({
         </Header>
       )}
       <div className={styles.center}>
-        {showControls && (
-          <>
-            <div className={styles.participants}>
-              <p>
-                {t("{{count}} people connected", {
-                  count: participatingMembers.length,
-                })}
-              </p>
-              <Facepile
-                size={facepileSize}
-                max={8}
-                className={styles.facepile}
-                client={client}
-                members={participatingMembers}
-              />
-            </div>
-            <div className={styles.footer}>
-              <OverflowMenu
-                inCall
-                roomIdOrAlias={roomIdOrAlias}
-                groupCall={groupCall}
-                showInvite={false}
-                feedbackModalState={feedbackModalState}
-                feedbackModalProps={feedbackModalProps}
-              />
-              {!isEmbedded && <HangupButton onPress={onLeave} />}
-              <InviteButton onPress={() => inviteModalState.open()} />
-            </div>
-          </>
-        )}
+        {/* Always render this because the window will become shorter when the on-screen
+            keyboard appears, so if we don't render it, the dialog will unmount. */}
+        <div style={{ display: showControls ? "block" : "none" }}>
+          <div className={styles.participants}>
+            <p>
+              {t("{{count}} people connected", {
+                count: participatingMembers.length,
+              })}
+            </p>
+            <Facepile
+              size={facepileSize}
+              max={8}
+              className={styles.facepile}
+              client={client}
+              members={participatingMembers}
+            />
+          </div>
+          <div className={styles.footer}>
+            <OverflowMenu
+              inCall
+              roomIdOrAlias={roomIdOrAlias}
+              groupCall={groupCall}
+              showInvite={false}
+              feedbackModalState={feedbackModalState}
+              feedbackModalProps={feedbackModalProps}
+            />
+            {!isEmbedded && <HangupButton onPress={onLeave} />}
+            <InviteButton onPress={() => inviteModalState.open()} />
+          </div>
+        </div>
 
         <div className={styles.pttButtonContainer}>
           {showControls &&