studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱(frontend) enable Y-scroll on participants menu

Browse Source 
Responsiveness issue. Fixed it, to allow user scrolling the
participants list.
This commit is contained in:
lebaudantoine
2024-09-03 13:37:46 +02:00
committed by aleb_the_flash
parent c8023573c6
commit 1fd1cb71ba
1 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
View File

@@ -78,43 +78,41 @@ export const ParticipantsList = () => {
<RiCloseLine /> <RiCloseLine />
</Button> </Button>
</Div> </Div>
<H <Div overflowY="scroll">
lvl={2} <H
className={css({ lvl={2}
fontSize: '0.875rem', className={css({
fontWeight: 'bold', fontSize: '0.875rem',
color: '#5f6368', fontWeight: 'bold',
padding: '0 1.5rem', color: '#5f6368',
marginBottom: '0.83em', padding: '0 1.5rem',
})} marginBottom: '0.83em',
> })}
{t('participants.subheading').toUpperCase()}
</H>
{raisedHandParticipants.length > 0 && (
<div
style={{
marginBottom: '.9375rem',
}}
> >
<ParticipantsCollapsableList {t('participants.subheading').toUpperCase()}
heading={t('participants.raisedHands')} </H>
participants={raisedHandParticipants} {raisedHandParticipants.length > 0 && (
renderParticipant={(participant) => ( <Div marginBottom=".9375rem">
<HandRaisedListItem participant={participant} /> <ParticipantsCollapsableList
)} heading={t('participants.raisedHands')}
action={() => ( participants={raisedHandParticipants}
<LowerAllHandsButton participants={raisedHandParticipants} /> renderParticipant={(participant) => (
)} <HandRaisedListItem participant={participant} />
/> )}
</div> action={() => (
)} <LowerAllHandsButton participants={raisedHandParticipants} />
<ParticipantsCollapsableList )}
heading={t('participants.contributors')} />
participants={sortedParticipants} </Div>
renderParticipant={(participant) => (
<ParticipantListItem participant={participant} />
)} )}
/> <ParticipantsCollapsableList
heading={t('participants.contributors')}
participants={sortedParticipants}
renderParticipant={(participant) => (
<ParticipantListItem participant={participant} />
)}
/>
</Div>
</Box> </Box>
) )
} }