From eb41a306a6dfcecc841aa771ecfb3bd89e341db4 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Mon, 29 Mar 2021 11:42:04 +0300
Subject: [PATCH] fix(lobby): Knocking participants list for small widths

---
 css/_lobby.scss                               | 76 ++++++++++++-------
 .../components/web/KnockingParticipantList.js |  6 +-
 2 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/css/_lobby.scss b/css/_lobby.scss
index 2a3746f72a..8eae196dc4 100644
--- a/css/_lobby.scss
+++ b/css/_lobby.scss
@@ -9,7 +9,7 @@
             .spinner {
                 margin: 30px;
             }
-    
+
             .joining-message {
                 margin: 10px;
             }
@@ -49,7 +49,7 @@
     position: fixed;
     top: 20;
     transition: top 1s ease;
-    z-index: 100;
+    z-index: $toolbarZ + 1;
 
     &.toolbox-visible {
         // Same as toolbox subject position
@@ -62,31 +62,6 @@
         padding: 15px
     }
 
-    ul {
-        list-style-type: none;
-        padding: 0 15px 15px 15px;
-
-        li {
-            align-items: center;
-            display: flex;
-            flex-direction: row;
-            margin: 8px 0;
-
-            .details {
-                display: flex;
-                flex: 1;
-                flex-direction: column;
-                justify-content: space-evenly;
-                margin: 0 30px 0 10px;
-            }
-
-            button {
-                align-self: unset;
-                margin: 0 5px;
-            }
-        }
-    }
-
     button {
         align-self: stretch;
         margin: 8px 0;
@@ -116,3 +91,50 @@
         }
     }
 }
+
+.knocking-participants-container {
+    list-style-type: none;
+    max-height: 600px;
+    overflow-y: scroll;
+    padding: 0 15px 15px 15px;
+}
+
+.knocking-participant {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    margin: 8px 0;
+
+    .details {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-evenly;
+        margin: 0 30px 0 10px;
+    }
+
+    button {
+        align-self: unset;
+        margin: 0 5px;
+    }
+}
+
+@media (max-width: 300px) {
+    #knocking-participant-list {
+        margin: 0;
+        text-align: center;
+        width: 100%;
+
+        .avatar {
+            display: none;
+        }
+    }
+
+    .knocking-participant {
+        flex-direction: column;
+
+        .details {
+            margin: 0;
+        }
+    }
+}
diff --git a/react/features/lobby/components/web/KnockingParticipantList.js b/react/features/lobby/components/web/KnockingParticipantList.js
index 565628b6a8..3a358d9e8c 100644
--- a/react/features/lobby/components/web/KnockingParticipantList.js
+++ b/react/features/lobby/components/web/KnockingParticipantList.js
@@ -42,9 +42,11 @@ class KnockingParticipantList extends AbstractKnockingParticipantList<Props> {
                 <span className = 'title'>
                     { t('lobby.knockingParticipantList') }
                 </span>
-                <ul>
+                <ul className = 'knocking-participants-container'>
                     { _participants.map(p => (
-                        <li key = { p.id }>
+                        <li
+                            className = 'knocking-participant'
+                            key = { p.id }>
                             <Avatar
                                 displayName = { p.name }
                                 size = { 48 }