[BUG] Scrollview scrolls when tapping a message bubble with ContextMenu open

[akshaysaambram-work]

Description

Opening the context menu on a message bubble causes the ScrollView to scroll unexpectedly. This happens after sending a message and tapping on the message bubble, and results in an unwanted movement of the chat view while the context menu is open.

Screenshots

Screen.Recording.2026-01-07.171801.mp4

Additional information

No response

Steps to Reproduce

1. Initiate a chat.
2. Send a message.
3. Tap/click on the message bubble to open the context menu.
4. Observe that the ScrollView scrolls when the context menu is triggered.

🥦 Browser

Brave

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

None

[github-actions]

To reduce notifications, issues are locked until they are valid/approved and to be assigned. In the meantime read the contributing guidelines -> https://github.com/Dun-sin/Whisper/blob/main/CONTRIBUTING.md

[github-actions]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you.

[1steve78]

Hi @Dun-sin and team! 👋

I'd like to work on this issue. I've analyzed the problem and have a solution ready to implement.

🔍 Root Cause

The ScrollView scrolls when opening the context menu because:

1. Click events are bubbling up to the scroll container
2. The context menu opening causes layout shifts that trigger scroll repositioning
3. No scroll lock mechanism is in place when the menu is active

🛠️ Proposed Solution

I'll implement a scroll-locking mechanism with these changes:

Files to modify:

• client/src/components/Chat/MessageList.jsx - Add scroll lock/unlock functions
• client/src/components/Chat/Message.jsx - Add context menu with proper event handling
• CSS updates - Prevent layout shifts and ensure proper positioning

Key implementation points:

1. Save scroll position before opening context menu
2. Lock scroll by setting overflow: hidden on the scroll container
3. Stop event propagation with e.stopPropagation()
4. Use position: fixed for the context menu (via React Portal)
5. Restore scroll position when menu closes using requestAnimationFrame

✅ Testing Plan

• Test on first, middle, and last messages
• Verify no scroll occurs on menu open
• Ensure scroll position is maintained on menu close
• Test rapid menu open/close scenarios
• Cross-browser testing (Chrome/Brave)

I'll have a PR ready within 24-48 hours. Let me know if this approach looks good or if you'd like me to take a different direction!

Thanks! 🚀