RocketChat / RocketChat/Rocket.Chat
Livechat widget does not reset smallScreen state after resizing to desktop
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
The Livechat widget does not reset its internal smallScreen state when the viewport changes from a small screen back to a larger screen.
In rocket-livechat.js, the mediaqueryresponse handler sets smallScreen = true when the media query matches (mobile/small screen), but does not set it back to false when the media query no longer matches. As a result, once the widget enters small-screen mode, it can remain stuck in that state even after resizing to desktop dimensions.
This causes mobile-only behaviors (such as body scroll locking) to be incorrectly applied on larger screens.
Steps to reproduce:
- Load the Livechat widget on a page.
- Resize the browser window (or rotate a device) so the widget enters a small-screen/mobile layout.
- Resize the window back to a large/desktop layout.
- Open or close the widget.
Expected behavior:
When the viewport no longer matches the small-screen media query, the widget should reset its internal state and behave as a desktop widget.
Desktop-specific behavior (including correct body scroll handling) should be restored after resizing back from mobile.
Actual behavior:
After resizing from mobile to desktop, the widget can continue behaving as if it is still in small-screen mode.
This results in mobile-only behavior (such as body scroll locking or layout constraints) persisting incorrectly on larger screens.
Server Setup Information:
- Version of Rocket.Chat Server: N/A (client-side widget issue)
- License Type: N/A
- Number of Users: N/A
- Operating System: Any
- Deployment Method: N/A
- Number of Running Instances: N/A
- DB Replicaset Oplog: N/A
- NodeJS Version: N/A
- MongoDB Version: N/A
Client Setup Information
- Desktop App or Browser Version: Any modern browser
- Operating System: Any
Additional context
The issue is located in the mediaqueryresponse handler where smallScreen is set to true when the media query matches, but is never explicitly reset to false in the non-matching branch.
This is observable after resizing or rotating the viewport and then interacting with the Livechat widget.
Relevant logs:
No specific server or browser logs are required to reproduce this issue.
The behavior can be observed directly by resizing the viewport and interacting with the widget.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in rocket-livechat.js at the mediaqueryresponse handler described in the issue. Reproduce the transition from small-screen to desktop by resizing the viewport, then verify that the handler restores the desktop state and that opening or closing the widget no longer applies mobile-only behavior such as body scroll locking.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100