RocketChat / RocketChat/Rocket.Chat
Horizontal scroll layout overflow on Developer Documentation site
Nobody has claimed this yet.
- 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
Steps to Reproduce
- Open the documentation page at the specific anchor section link on a standard desktop/laptop resolution.
- Ensure your browser zoom is set to 100%.
- Scroll down slightly or look right above the "Standard architecture" section to find the "Community plan architecture" diagram block.
- Observe the massive horizontal scrollbar that appears.
- 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)
https://github.com/user-attachments/assets/35ff74e9-7add-4071-8f38-af70fbb3ad84
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 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