From 4dede8d81e8a29dd1087c7f79b9c2d8fab4db5d1 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Thu, 31 Jul 2025 11:07:06 -0500
Subject: [PATCH] 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.
---
 .../components/web/ParticipantsPane.tsx          | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/react/features/participants-pane/components/web/ParticipantsPane.tsx b/react/features/participants-pane/components/web/ParticipantsPane.tsx
index 420a8cfc20..51667e2715 100644
--- a/react/features/participants-pane/components/web/ParticipantsPane.tsx
+++ b/react/features/participants-pane/components/web/ParticipantsPane.tsx
@@ -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'
+                    }
+                }
             }
         },