Sidebar Overlaps Thread Panel When Resizing Browser Window

Description:

When resizing the browser window while a thread is open in a channel, the thread panel takes up the entire screen, but the sidebar remains open, overlapping the content.

Steps to reproduce:

1. Open Rocket.Chat in a browser.
2. Resize the browser window to about half the screen width.
3. Open a thread in any channel.
4. Gradually reduce the browser width further.
5. Observe that at a certain point, the thread panel expands to take the full screen while the sidebar remains visible.

Expected behavior:

When the thread panel takes full screen on small window sizes, the sidebar should automatically collapse to ensure a clean layout.

Actual behavior:

The thread panel takes up the entire screen, but the sidebar remains open, causing an overlap and layout issues.

Server Setup Information:

• Version of Rocket.Chat Server: open.rocket.chat

Client Setup Information

• Desktop App or Browser Version:firefox 136.0.1 (64-bit)
• Operating System:Ubuntu 24.04.2 LTS

Additional context

https://github.com/user-attachments/assets/5794bf45-519d-4964-aca2-67f379b78479

If anyone wants to work on this issue, feel free to open a PR. Contributions are welcome, and the first valid PR will be considered. Thank you!

Start by reproducing the issue in a browser with a thread open, then resize the window gradually as described. Trace the responsive layout behavior for the thread panel and sidebar; done means the sidebar collapses when the thread panel becomes full-screen, without overlap.