From 1fd1cb71ba1bf622c573d0dccf24768ff011defa Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 3 Sep 2024 13:37:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20enable=20Y-scroll=20on?=
 =?UTF-8?q?=20participants=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Responsiveness issue. Fixed it, to allow user scrolling the
participants list.
---
 .../Participants/ParticipantsList.tsx         | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index 02e90f1d..f20da550 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -78,43 +78,41 @@ export const ParticipantsList = () => {
           <RiCloseLine />
         </Button>
       </Div>
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: '#5f6368',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
-      >
-        {t('participants.subheading').toUpperCase()}
-      </H>
-      {raisedHandParticipants.length > 0 && (
-        <div
-          style={{
-            marginBottom: '.9375rem',
-          }}
+      <Div overflowY="scroll">
+        <H
+          lvl={2}
+          className={css({
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            color: '#5f6368',
+            padding: '0 1.5rem',
+            marginBottom: '0.83em',
+          })}
         >
-          <ParticipantsCollapsableList
-            heading={t('participants.raisedHands')}
-            participants={raisedHandParticipants}
-            renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
-            )}
-            action={() => (
-              <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
-          />
-        </div>
-      )}
-      <ParticipantsCollapsableList
-        heading={t('participants.contributors')}
-        participants={sortedParticipants}
-        renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
+          {t('participants.subheading').toUpperCase()}
+        </H>
+        {raisedHandParticipants.length > 0 && (
+          <Div marginBottom=".9375rem">
+            <ParticipantsCollapsableList
+              heading={t('participants.raisedHands')}
+              participants={raisedHandParticipants}
+              renderParticipant={(participant) => (
+                <HandRaisedListItem participant={participant} />
+              )}
+              action={() => (
+                <LowerAllHandsButton participants={raisedHandParticipants} />
+              )}
+            />
+          </Div>
         )}
-      />
+        <ParticipantsCollapsableList
+          heading={t('participants.contributors')}
+          participants={sortedParticipants}
+          renderParticipant={(participant) => (
+            <ParticipantListItem participant={participant} />
+          )}
+        />
+      </Div>
     </Box>
   )
 }