fix(lobby): Knocking participants list for small widths

css/_lobby.scss

@@ -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,11 +62,44 @@
         padding: 15px
     }
 
-    ul {
+    button {
+        align-self: stretch;
+        margin: 8px 0;
+        padding: 12px;
+        transition: .2s transform ease;
+
+        &:disabled {
+            opacity: .5;
+        }
+
+        &:hover {
+            transform: scale(1.05);
+
+            &:disabled {
+                transform: none;
+            }
+        }
+
+        &.borderLess {
+            background-color: transparent;
+            border-width: 0;
+        }
+
+        &.primary {
+            background-color: rgb(3, 118, 218);
+            border-width: 0;
+        }
+    }
+}
+
+.knocking-participants-container {
     list-style-type: none;
+    max-height: 600px;
+    overflow-y: scroll;
     padding: 0 15px 15px 15px;
+}
 
-        li {
+.knocking-participant {
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -85,34 +118,23 @@
         margin: 0 5px;
     }
 }
-    }
-
-    button {
-        align-self: stretch;
-        margin: 8px 0;
-        padding: 12px;
-        transition: .2s transform ease;
-
-        &:disabled {
-            opacity: .5;
-        }
 
-        &:hover {
+@media (max-width: 300px) {
-            transform: scale(1.05);
+    #knocking-participant-list {
+        margin: 0;
+        text-align: center;
+        width: 100%;
 
-            &:disabled {
+        .avatar {
-                transform: none;
+            display: none;
         }
     }
 
-        &.borderLess {
+    .knocking-participant {
-            background-color: transparent;
+        flex-direction: column;
-            border-width: 0;
-        }
 
-        &.primary {
+        .details {
-            background-color: rgb(3, 118, 218);
+            margin: 0;
-            border-width: 0;
         }
     }
 }

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 }