RocketChat / RocketChat/Rocket.Chat

Responsive header hides primary navigation actions on smaller screen widths

Open
#38,116 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

When the screen width is reduced (tablet / small desktop sizes), the top navigation header collapses into a compact layout. In this state, only "Home" and "Directory" are available under the stack (layers) icon, while other primary actions such as "Marketplace" and "Display" are no longer accessible.

This results in missing functionality on smaller viewports and creates an inconsistent navigation experience compared to larger screen sizes.

Steps to reproduce:
  1. Log in to a Rocket.Chat workspace.
  2. Navigate to the Home page.
  3. Open browser DevTools and reduce the viewport width (≈ 700–800px).
  4. Observe the top navigation bar collapsing.
  5. Click on the stack (layers) icon in the header.
Expected behavior:

All primary navigation actions (Home, Directory, Marketplace, Display, Create New) should remain accessible on smaller screen sizes, either via an overflow menu or a responsive dropdown.

Actual behavior:

Only "Home" and "Directory" are available under the stack icon. Other primary actions such as "Marketplace"
and "Display" are hidden and cannot be accessed.
Image

Server Setup Information:
  • Version of Rocket.Chat Server: Local development (latest develop branch)
  • License Type: Community
  • Number of Users: 1
  • Operating System: macOS
  • Deployment Method: Local source setup
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Enabled (default)
  • NodeJS Version: 22.18.0
  • MongoDB Version: 7.0.16
Client Setup Information
  • Desktop App or Browser Version: Chrome (latest)
  • Operating System: macOS
Additional context

This appears to be a responsive UI/UX issue rather than a permissions-related restriction, as the options are visible on larger screen widths but disappear when the layout collapses.

Relevant logs:

N/A (UI rendering issue, no console errors observed)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in Chrome at a viewport of about 700–800px on the Home page, then inspect the responsive header and its stack-menu entry point. Verify which actions are present at larger widths and missing in the compact layout. Done means Home, Directory, Marketplace, Display, and Create New remain accessible at smaller widths without permission-related errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.