The page for merge request diffs is not readable on mobile phones

Summary

The page layout for merge request is not usable on smartphones. Hence code reviews on GitLab hosted projects currently cannot be performed with mobiles.

Steps to reproduce

On a regular smartphone, open a merge request and select the "Changes" tab to show the file content diffs.

Example Project

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/5841/diffs

What is the current bug behavior?

• Code lines are wrapped instead of the code being scrollable horizontally.
• Sometimes the whole website is scrollable horizontally making the whole file content disappear

What is the expected correct behavior?

• Code lines are not wrapped but the diff is scrollable horizontally
• The whole page is not scrollable horizontally to prevent the changes to disappear from screen.

Relevant logs and/or screenshots

Output of checks

This bug happens on GitLab.com

Solution

Set a max-width. Use width: 990px on .container-limited (which is the max-width on desktop)