📱(frontend) enable Y-scroll on participants menu

Responsiveness issue. Fixed it, to allow user scrolling the participants list.
numerique-gouv · Sep 3, 2024 · 12656a8 · 12656a8
1 parent 3fe71c6
commit 12656a8
Showing 1 changed file with 33 additions and 35 deletions.
diff --git a/...frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/...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>
   )
 }