Give blame and side-by-side diff views room to breathe
TL;DR I think the max-width restriction on the "blame" and "side by side diff" views is a mistake and I'd like to advocate for the following:
- Allow blame and side-by-side diff views to break out of the max-width constraint regardless of users' "Layout Width" setting.
- Create a minimum width for these pages so that they never break down to an unusably-small screen width.
Both the blame view (https://gitlab.com/gitlab-org/gitlab-ce/blame/a52d8c101d/app/assets/stylesheets/framework/header.scss) and the diff view (https://gitlab.com/gitlab-org/gitlab-ce/compare/2f4f321068...6b5b93abe6) require a lot of horizontal space to be useful. There is a lot of information being presented in each line and the more crammed it looks, the harder it becomes to read.
On GitLab, unless you have your preferences set to "Layout Width: Fluid", these views are both fixed to a max-width of about 1250px, with lines wrapping after this point. GitHub, by comparison, treats these pages as special, allowing them to use the entire width of the page. Here are some example screenshots:
Blame View (Large Screen)
(top: GitLab, bottom: GitHub)
| fixed width | fluid width |
|---|---|
 |
 |
Here you can see how GitHub allows the blame view to continue all the way across the page. Furthermore, they optimized the meta information on the left to have a set width, and limit it to a single line. They've eliminated everything non-essential to save space:
- no git SHA (you can get this by clicking the commit anyway)
- no author name (you can get this by mousing over avatar)
- avatar is shrunk to the size of a single line
- date string is less verbose
- commit string text has a smaller font size
In contrast our meta information takes up two lines, which makes single-line blame blocks look awkward with gaps between lines in the code. Furthermore, in our fluid width view, the meta information stretches to 50% of the view space. This is way bigger than necessary.
Diff View (Large Screen)
(top: GitLab, bottom: GitHub)
| fixed width | fluid width |
|---|---|
 |
 |
GitHub also allows the parallel/side-by-side diff view to stretch across the full width, just like our fluid layout variant. I'd just suggest that we do this in all cases, regardless of user "Layout Width" preferences. I don't want to have to switch my preferences from fixed to fluid and back again every time I want to view a file diff or a blame view.
Diff View (Condensed Screen)
On the flip side of this, we also ought to have a minimum width for diff and blame views. We already do have a minimum width in the case of blame, in which we will scroll left and right when the viewport is smaller than about 920px. I suggest we do something similar with diff. The screen shot above is practically useless, and on mobile devices it is even worse. We should:
- create a minimum width for side-by-side diff views similar to our blame view
- possibly disable side-by-side diffs below a certain screen width (hide the option, and ignore the preference cookie when on mobile devices)
These feature behaviors have frustrated me the most ever since I moved from using GitHub to working with GitLab, and I think they would not be terribly difficult to improve.