RocketChat / RocketChat/Rocket.Chat

Mobile Footer Layout is Not Properly Optimized Compared to Desktop Version

Open
#39,496 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Description

While reviewing the website footer, I noticed that the layout behaves differently on mobile compared to the desktop version.

On desktop screens, the footer is displayed in a well-structured multi-column layout (Company, Platform, Resources, Download, Support). However, on mobile devices the footer becomes very long and stacked vertically, making navigation less user-friendly.

Expected Behavior

The mobile footer should be optimized for small screens, for example:

  • Collapsible sections (accordion style)
  • Better spacing and alignment
  • Reduced vertical scrolling
  • Improved readability and navigation
Current Behavior

On mobile view:

  • All footer sections are displayed sequentially in a long list
  • The layout appears crowded
  • Users must scroll significantly to reach the bottom
Screenshots

Desktop View:

Image

Mobile View:

Image Image Image
Possible Improvement

Implement responsive footer behavior for mobile devices such as:

  • Accordion/collapsible sections
  • Improved spacing between sections
  • Optimized responsive grid
Environment

Device: Mobile
Viewport: ~375px width
Browser: Chrome

Additional Context

I would like to work on this issue if it is approved.
Please feel free to assign it to me. and i will fish as soon as possible

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

No footer file, component, or test is identified in the issue. Start by locating the website footer entry point and comparing its desktop and approximately 375px mobile rendering with the supplied screenshots. Done means the mobile footer is less crowded and easier to navigate while preserving the desktop layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.