RocketChat / RocketChat/Rocket.Chat
Mobile Footer Layout is Not Properly Optimized Compared to Desktop Version
Nobody has claimed this yet.
- 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:
Mobile View:
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
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
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