From a8af70993bdffa83ab3b6f6ba6f4724e7ee37fef Mon Sep 17 00:00:00 2001
From: Pedro Beschorner Marin <pedrobmarin@gmail.com>
Date: Tue, 18 Aug 2020 18:31:22 -0300
Subject: [PATCH] Make the guest list a scrollable element

---
 .../ui/components/waiting-users/component.jsx | 60 ++++++++++---------
 .../ui/components/waiting-users/styles.scss   | 27 +++++++++
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx b/bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx
index 62e87853f2..94d4890011 100755
--- a/bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx
@@ -115,19 +115,23 @@ const renderGuestUserItem = (name, color, handleAccept, handleDeny, role, sequen
 const renderPendingUsers = (message, usersArray, action, intl) => {
   if (!usersArray.length) return null;
   return (
-    <div>
+    <div className={styles.pendingUsers}>
       <p className={styles.mainTitle}>{message}</p>
-      {usersArray.map((user, idx) => renderGuestUserItem(
-        user.name,
-        user.color,
-        () => action([user], ALLOW_STATUS),
-        () => action([user], DENY_STATUS),
-        user.role,
-        idx + 1,
-        user.intId,
-        user.avatar,
-        intl,
-      ))}
+      <div className={styles.usersWrapper}>
+        <div className={styles.users}>
+          {usersArray.map((user, idx) => renderGuestUserItem(
+            user.name,
+            user.color,
+            () => action([user], ALLOW_STATUS),
+            () => action([user], DENY_STATUS),
+            user.role,
+            idx + 1,
+            user.intId,
+            user.avatar,
+            intl,
+          ))}
+        </div>
+      </div>
     </div>
   );
 };
@@ -230,7 +234,7 @@ const WaitingUsers = (props) => {
           />
         </div>
       </header>
-      <main>
+      <div>
         <div>
           <p className={styles.mainTitle}>{intl.formatMessage(intlMessages.optionTitle)}</p>
           {
@@ -246,21 +250,21 @@ const WaitingUsers = (props) => {
             {intl.formatMessage(intlMessages.rememberChoice)}
           </label>
         </div>
-        {renderPendingUsers(
-          intl.formatMessage(intlMessages.pendingUsers,
-            { 0: authenticatedUsers.length }),
-          authenticatedUsers,
-          guestUsersCall,
-          intl,
-        )}
-        {renderPendingUsers(
-          intl.formatMessage(intlMessages.pendingGuestUsers,
-            { 0: guestUsers.length }),
-          guestUsers,
-          guestUsersCall,
-          intl,
-        )}
-      </main>
+      </div>
+      {renderPendingUsers(
+        intl.formatMessage(intlMessages.pendingUsers,
+          { 0: authenticatedUsers.length }),
+        authenticatedUsers,
+        guestUsersCall,
+        intl,
+      )}
+      {renderPendingUsers(
+        intl.formatMessage(intlMessages.pendingGuestUsers,
+          { 0: guestUsers.length }),
+        guestUsers,
+        guestUsersCall,
+        intl,
+      )}
     </div>
   );
 };
diff --git a/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss b/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
index 4e5dafedbe..b36d60c51a 100644
--- a/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
@@ -144,6 +144,33 @@
   }
 }
 
+.pendingUsers {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.usersWrapper {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  position: relative;
+}
+
+.users {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
 .userName {
   min-width: 0;
   display: inline-block;