Limit description container for mrs while viewing side by side diff20916-issues-mrs-linelength

4 files changed, 44 insertions, 17 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 55d97b9219c..13abe6033b2 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -166,8 +166,7 @@ $row-hover-border: #b2d7ff;
 $progress-color: #c0392b;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
-$limited-layout-width: 958px;
-$line-length-width: 700px;
+$limited-layout-width: 990px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
 $border-radius-default: 2px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 2357dd2fe6f..0b15a72e6b4 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,15 +1,48 @@
-.container-limited.limit-container-width {
-  .issue-details {
-    .description,
-    .note-body {
-      p,
-      ul,
-      ol,
-      .code {
-        max-width: $line-length-width;
+// 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 {
@@ -23,7 +56,6 @@
   .description img:not(.emoji) {
     border: 1px solid $table-border-gray;
     padding: 5px;
-    margin: 5px;
     max-height: calc(100vh - 100px);
   }
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 10eb3d4203e..d697c8d25df 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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 {
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 0db5548d36e..1187b04edb8 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -42,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"