VIDCS-3673: Z index issue when we have a full participants list and opening the kebab for last participants #152
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR resolves a z-index stacking issue where the number badge was overlaying the kebab pop-up on the full participants list.
- Update the Popper component’s z-index in ParticipantListItemMenu.
- Add a z-index style to ParticipantListButton to ensure the correct stacking order.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantListItemMenu.tsx | Updated Popper with an inline zIndex style to ensure the menu appears above overlapping elements. |
| frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx | Added a zIndex style to the button to manage its stacking context relative to the Popper. |
| @@ -35,7 +35,7 @@ const ParticipantListItemMenu = ({ | |||
| <IconButton onClick={handleClick} sx={{ marginRight: '-8px' }}> | |||
| <MoreVertIcon sx={{ fontSize: '18px' }} /> | |||
| </IconButton> | |||
| <Popper open={isOpen} anchorEl={anchorEl} placement="bottom-start"> | |||
| <Popper open={isOpen} anchorEl={anchorEl} placement="bottom-start" sx={{ zIndex: 10 }}> | |||
There was a problem hiding this comment.
[nitpick] Consider using a theme-based z-index constant instead of a magic number to maintain consistency with the rest of the UI and avoid potential conflicts with other components.
Copilot uses AI. Check for mistakes.
| @@ -42,6 +42,7 @@ const ParticipantListButton = ({ | |||
| backgroundColor: 'rgb(95, 99, 104)', | |||
| }, | |||
| marginRight: '12px', | |||
| zIndex: 1, | |||
There was a problem hiding this comment.
[nitpick] Verify that the z-index value of 1 is appropriate for the stacking context, and consider refactoring to use a theme-based constant for consistent UI layering across components.
Copilot uses AI. Check for mistakes.
|
|
looks good! |
What is this PR doing?
This PR fixes "Z index issue when we have a full participants list and opening the kebab for last participants"
How should this be manually tested?
To reproduce the issue, add a lot of participants to the meeting the room.
Click on the kebab menu button and notice that the number badge is over the popup:
To reproduce the fix, checkout this branch and do the steps above.
Notice that it is no longer the case.
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDCS-3673
Checklist
[ ] Branch is based on
develop(notmain).[ ] Resolves a
Known Issue.[ ] If yes, did you remove the item from the
docs/KNOWN_ISSUES.md?[ ] Resolves an item reported in
Issues.If yes, which issue? Issue Number?