RocketChat / RocketChat/Rocket.Chat
Admin Home page: last card breaks layout on mobile screens
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 last card on the Admin Home page (Custom HTML content section) is not responsive on mobile viewport sizes. When the screen width is reduced, the layout breaks and action buttons are partially hidden or not usable, while the other cards on the same page adapt correctly.
This issue is reproducible on a local Rocket.Chat deployment and appears to be a UI responsiveness bug.
Steps to reproduce:
- Start a Rocket.Chat server locally
- Log in as an admin user
- Navigate to Home
- Resize the browser window to a mobile width (or open DevTools and enable mobile view)
- Scroll to the last card on the page
Expected behavior:
The Admin Home page cards should be fully responsive, with all text and buttons stacking or resizing correctly on mobile viewports, consistent with the other cards on the page.
Actual behavior:
-> The last card does not respond correctly on mobile screen sizes:
-> Buttons are partially hidden or clipped
-> Layout does not stack properly
-> Content overflows compared to other responsive cards
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
-> The issue only affects the last card on the Admin Home page
-> Other cards on the same page respond correctly on mobile
-> I am willing to submit a PR to fix this issue if approved
Relevant logs:
No relevant server or browser errors observed. This appears to be a layout issue only.
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 on the Admin Home page and reproduce the issue at a mobile viewport, focusing on the last Custom HTML content card. Compare its behavior with the other cards; done means its text and action buttons remain usable without clipping or overflow and the layout adapts correctly on narrow screens.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100