RocketChat / RocketChat/Rocket.Chat

Horizontal scroll layout overflow on Developer Documentation site

Open
#41,471 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Bug Report: Document360 Layout Overflow and Viewport Lockout

Description

The "Architecture and Components" developer documentation page experiences a severe layout breakdown at 100% browser zoom. An overflowing diagram asset combined with underlying platform scroll scripts completely traps the user's viewport, making the left side text and sidebar menu inaccessible.

Page URL

https://developer.rocket.chat/docs/architecture-and-components#standard-architecture-premium-and-community-plans

Steps to Reproduce
  1. Open the documentation page at the specific anchor section link on a standard desktop/laptop resolution.
  2. Ensure your browser zoom is set to 100%.
  3. Scroll down slightly or look right above the "Standard architecture" section to find the "Community plan architecture" diagram block.
  4. Observe the massive horizontal scrollbar that appears.
  5. Attempt to click and drag the horizontal scrollbar back to the left to read the left-aligned text or access the sidebar menu.
Actual Behavior
  • The architecture diagram overflows its parent container width.
  • When attempting to scroll left, Document360 viewport management scripts instantly snap/rubber-band the browser view back to the center coordinates of the wide container element.
  • This behavior creates an endless loop that completely locks out access to the left navigation panel and breaks usability.
Expected Behavior
  • Images and SVG media components should utilize responsive sizing rules (max-width: 100%; height: auto;) to scale fluidly within the text viewport boundaries.
  • Navigating horizontally should never trigger automated script loops that violently snap the user's view away from their manual scrolling position.
Environment Context
  • Platform: Rocket.Chat Developer Docs (Document360 engine)
  • Zoom Level: 100%
  • Resolution: Standard desktop viewports (e.g., 1920x1080 / 1440x900)
Image

https://github.com/user-attachments/assets/35ff74e9-7add-4071-8f38-af70fbb3ad84

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

Start with the linked Architecture and Components page at the reported anchor and inspect the Community plan architecture diagram and its Document360 layout or media settings. Confirm the overflow at 100% zoom across the reported desktop sizes; done means the diagram stays within the text viewport and horizontal navigation no longer snaps away from the left sidebar.

Written by the indexing model from the issue text.

Assessment

Domain
documentation
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.