User card layout breaks on small mobile screens (<450px)

Description:

When viewing Rocket.Chat on a small mobile viewport, opening a user profile by clicking the avatar causes the user card to overflow the screen and break the layout.
This issue occurs on screens below approximately 450px width, affecting common mobile device sizes (360–430px).

The user card content (avatar, username, nickname, and status) does not fit within the viewport, resulting in horizontal overflow and poor usability.

Steps to reproduce:

1. Open Rocket.Chat in a browser.
2. Switch to mobile view (or use a mobile device / Chrome DevTools).
3. Set viewport width below 450px.
4. Open any chat room.
5. Click on a user’s avatar to open the user card.

Expected behavior:

The user card should remain fully visible within the viewport on mobile screens, with no horizontal overflow and readable content.

Actual behavior:

The user card overflows the viewport on small screens, breaking the layout.
Some content extends beyond the visible area, making the profile difficult or impossible to use.

https://github.com/user-attachments/assets/3bcde218-b775-474f-8b1f-751584a435d3

Server Setup Information:

• Version of Rocket.Chat Server: 8.1
• License Type: Community
• Number of Users: <5
• Operating System: Windows (WSL 2)
• Deployment Method: tar/source
• Number of Running Instances: 1
• DB Replicaset Oplog: Disabled
• NodeJS Version: 22.16.0
• MongoDB Version: 6.0.5

Client Setup Information

• Desktop App or Browser Version: Chrome(Latest)
• Operating System: Windows (WSL 2)

Additional context

This is a frontend-only responsive layout issue.
A fix has been prepared that improves mobile support down to approximately 340px width by adjusting spacing and visibility of non-critical elements, without affecting desktop or tablet layouts.

Relevant logs:

No relevant server or browser errors observed.
Issue is purely related to frontend layout and CSS responsiveness.

Start by reproducing the user card overflow in Chrome DevTools at viewport widths below 450px, then inspect the user card's responsive layout styles. Done means the card fits without horizontal overflow down to approximately 340px while desktop and tablet layouts remain unchanged.