Merge branch '20916-issues-mrs-linelength' into 'master'

Shorten line length of issues and mrs

Limits container width on issue and mr pages. Shortens line length to human readable length.

![Screen_Shot_2016-12-02_at_12.48.08_PM](https://gitlab.com/gitlab-org/gitlab-ce/uploads/740647c0fd6ea4f0f0aef62155992afe/Screen_Shot_2016-12-05_at_12.54.12_PM.png)

Closes #20916 
Closes #24408

See merge request !7858

app/assets/stylesheets/framework/layout.scss

@@ -26,6 +26,10 @@ body {
 
 .container-limited {
   max-width: $fixed-layout-width;
+
+  &.limit-container-width {
+    max-width: $limited-layout-width;
+  }
 }
 
 

app/assets/stylesheets/framework/variables.scss

@@ -154,6 +154,8 @@ $row-hover-border: #b2d7ff;
 $progress-color: #c0392b;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
+$limited-layout-width: 990px;
+$gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
 $border-radius-default: 2px;
 $settings-icon-size: 18px;

app/assets/stylesheets/pages/issuable.scss

@@ -1,3 +1,50 @@
+// Limit MR description for side-by-side diff view
+.limit-container-width {
+  .detail-page-header {
+    max-width: calc(#{$limited-layout-width} - (#{$gl-padding} * 2));
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .issuable-details {
+    .detail-page-description,
+    .mr-source-target,
+    .mr-state-widget,
+    .merge-manually {
+      max-width: calc(#{$limited-layout-width} - (#{$gl-padding} * 2));
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .merge-request-tabs-holder {
+      &.affix {
+        border-bottom: 1px solid $border-color;
+
+        .nav-links {
+          border: 0;
+        }
+      }
+
+      .container-fluid {
+        padding-left: 0;
+        padding-right: 0;
+        max-width: calc(#{$limited-layout-width} - (#{$gl-padding} * 2));
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  .diffs {
+    .mr-version-controls,
+    .files-changed {
+      max-width: calc(#{$limited-layout-width} - (#{$gl-padding} * 2));
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
 .issuable-details {
   section {
     .issuable-discussion {
@@ -9,7 +56,6 @@
   .description img:not(.emoji) {
     border: 1px solid $white-normal;
     padding: 5px;
-    margin: 5px;
     max-height: calc(100vh - 100px);
   }
 }

app/assets/stylesheets/pages/notes.scss

@@ -383,10 +383,6 @@ ul.notes {
   .note-action-button {
     margin-left: 10px;
   }
-
-  @media (min-width: $screen-sm-min) {
-    position: relative;
-  }
 }
 
 .discussion-actions {

app/views/projects/issues/show.html.haml

@@ -1,3 +1,4 @@
+- @content_class = "limit-container-width"
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes

app/views/projects/merge_requests/_show.html.haml

@@ -1,3 +1,4 @@
+- @content_class = "limit-container-width"
 - page_title           "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
@@ -41,7 +42,7 @@
     = render "projects/merge_requests/widget/show.html.haml"
 
     - if @merge_request.source_branch_exists? && @merge_request.mergeable? && @merge_request.can_be_merged_by?(current_user)
-      .light.prepend-top-default.append-bottom-default
+      .merge-manually.light.prepend-top-default.append-bottom-default
         You can also accept this merge request manually using the
         = succeed '.' do
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"