Fix overscroll behavior and scroll leak for webchat

[sushmi21]

Success criteria

Please describe what should be possible after this change. List all individual items on a separate line.

• When overscrolling a scrollable area, like chat-log, previous-conversations, etc the background body should not scroll
• When in mobile device, scrolling inside webchat should not scroll the body with or without the mobile keypad open

How to test

Please describe the individual steps on how a peer can test your change.

1. Add overflowing content to the body of the index.html
2. Chat with the bot to create overflowing chat log
3. Test if over-scrolling inside log, scrolls the body
4. Test the webchat using a mobile phone and see if the body does not scroll when scrolling inside the webchat (like scrolling inside input fields with mobile keypad open, chat log, previous conversation list, etc)

Security

• Possible injection vector
• Authentication/Access controls touched
• Sensitive Data could be exposed
• XSS
• Logging/Monitoring touched
• Exchanges data with external systems
• No security implications

Additional considerations

• This PR might have performance implications

Documentation Considerations

These are hints for the documentation team to help write the docs.

[Copilot]

Pull request overview

This PR fixes overscroll behavior in the webchat interface to prevent background body scrolling when interacting with scrollable areas within the webchat, particularly on mobile devices.

• Added overscrollBehavior: "contain" CSS property to multiple scrollable components
• Integrated react-remove-scroll library to prevent body scroll on mobile viewports when webchat is open
• Created a utility function to detect mobile viewports (≤575px width)

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/webchat-ui/utils/isMobile.ts	New utility to detect mobile viewport based on window width
src/webchat-ui/components/presentational/previous-conversations/ConversationsList.tsx	Added overscroll containment to conversations list
src/webchat-ui/components/presentational/chat-options/ChatOptions.tsx	Added overscroll containment to chat options container
src/webchat-ui/components/presentational/WebchatRoot.tsx	Added overscroll containment to webchat root component
src/webchat-ui/components/presentational/PrivacyNotice.tsx	Added overscroll containment and formatting cleanup
src/webchat-ui/components/plugins/input/menu/PersistentMenu.tsx	Added overscroll containment to persistent menu
src/webchat-ui/components/plugins/input/base/BaseInput.tsx	Added overscroll containment to textarea input
src/webchat-ui/components/WebchatUI.tsx	Wrapped webchat with RemoveScroll component for mobile, added overscroll containment to layout containers
package.json	Added react-remove-scroll dependency

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[vj-venkatesan]

Best case scenario is working good. When I scroll the chat log , the underlying body doesn't scroll. However the auto scroll behaviour we have when I open a conversation seems to scroll the background . I tested that scenario in my phone . I hope the screen recording helps.

Its not big UX issue , however if there is way to fix it would be nice to do a follow up

ScreenRecording_12-04-2025.10-56-57_1.MP4