Standardize MR description & MR widget/tabs placement

The problem

  • Merge request descriptions have no consistency
  • A description can contain dozens of embedded images, causing the MR widget & the Discussion/Commits/Pipelines/Changes tabs to be at a different place on the page
    • A user can never be sure where these elements are placed, and it is very frustrating scrolling up and down to locate them

Original issue

https://gitlab.com/gitlab-org/gitlab-ce/issues/25184
@toupeira suggested moving all tabs to the top of the MR page, and adding a new tab, Description

Original solution

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9346
I thought it would be best to keep the MR widget outside of the tabs altogether, so that a user knows what the status is at first glance. This MR added the description to the Discussion tab, so that the widget would appear at essentially the same place on every merge request page. This idea was met with a lot of resistance, mainly because people seem to use the description quite often, and like having it at the top of every page.
From @haynes:

The main one that bothers me is that the main focus of this site is not the MR description anymore.
As someone who views an MR for the first time, i don't care if i can accept it or not.
I want to know what it is about.
So the current design was pretty good for that purpose.

There's also a slight problem with the flow of the entire page. We do have slash commands to make this easier, but it is slightly strange that after reviewing a lot of code, the Merge button is way back at the top of the page.
From @dblessing:

I agree the description and discussion are currently disjointed. I feel like it's the MR widget that's the problem, though. It's long felt unnatural to me to have it at the top. Consider that a reviewer is going to go see the discussion and then go through code changes top to bottom. Once at the bottom, the reviewer is going to add a new comment or comment on code changes. It's unnatural then to jump back to the top of the page to merge or take further action.

Next steps

I think this could use a lot of UX work and research. Github and Bitbucket have different approaches than ours, but none of them feels 100% right. Some things to think about:

  • Keeping the MR description where it is, and standardizing a max-height. A user would need to click to expand the full description.
  • Saving your scroll place between tabs- if you're halfway through reviewing code on the Changes tab and need to click over to Discussion, when you go back to Changes your scroll location should be saved
  • Adding a lightbox or something so that images don't display full-scale in the description or discussion