Improve Merge Request diffs UI to be usable on small screens

Summary

While viewing MR diffs on phone, in portrait orientation the content wraps and overflows, and in landscape orientation, the content area is barely usable.

Mobile Landscape Layout

Here's how the diff accessibility is while scrolling the content:

MR diff scrolling UX
21-12-22-16-27-23

Proposal

While &5038 (closed) is tracking a larger effort on improving MR UX all around, but until we get there, we can do an MVC by introducing some form of a full-screen button (much like our Markdown field's full-screen toggle) which hides/collapses all unnecessary bits from UI leaving just file title and diff content to show. Also, this button can be shown only when screen size is small enough to have the need for it.

MR diff full-screen layout

This may even be as much of an effort as a top-level CSS class getting added on a button click that leads to a bunch of styles applied to UI without touching a lot of files.

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.