fix(participants-pane): restore scrolling and fix context menu clipping

The participant pane lost its scrolling capability when commit 2305ae85a removed the overflowY: 'auto' property from the container styles. This prevented users from scrolling through long lists of participants, breakout rooms, or visitors when the content exceeded the available height.

Additionally, context menus were being clipped on the left side due to the overflow constraints. This became apparent after the av-moderation feature added longer menu items like "Stop screen-sharing for everyone else".

Fix:
- Restore overflowY: 'auto' to enable vertical scrolling
- Add maxWidth constraint (285px) to context menus to prevent horizontal clipping
- Allow menu text to wrap to multiple lines instead of being cut off
- Add TODO comment for future portal-based implementation

This temporary solution provides both functional scrolling and fully readable context menus until a proper architectural change can be implemented to portal context menus outside the scrollable container.
This commit is contained in:
Hristo Terezov
2025-07-31 11:07:06 -05:00
parent 5b7e3bb2d7
commit 6de18fe82d

View File

@@ -71,6 +71,7 @@ const useStyles = makeStyles<IStylesProps>()((theme, { isChatOpen }) => {
container: {
boxSizing: 'border-box',
flex: 1,
overflowY: 'auto',
position: 'relative',
padding: `0 ${participantsPaneTheme.panePadding}px`,
display: 'flex',
@@ -78,6 +79,21 @@ const useStyles = makeStyles<IStylesProps>()((theme, { isChatOpen }) => {
'&::-webkit-scrollbar': {
display: 'none'
},
// Temporary fix: Limit context menu width to prevent clipping
// TODO: Long-term fix would be to portal context menus outside the scrollable container
'& [class*="contextMenu"]': {
maxWidth: '285px',
'& [class*="contextMenuItem"]': {
whiteSpace: 'normal',
'& span': {
whiteSpace: 'normal',
wordBreak: 'break-word'
}
}
}
},