Draw side-by-side view only one table.

app/assets/javascripts/merge_conflict_data_provider.js.es6

@@ -53,14 +53,15 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
   setParallelLines(data) {
     data.files.forEach( (file) => {
       file.filePath = this.getFilePath(file);
-      file.parallelLines = { left: [], right: [] };
+      file.parallelLines = [];
+      const linesObj = { left: [], right: [] };
 
       file.sections.forEach( (section) => {
         const { conflict, lines, id } = section;
 
         if (conflict) {
-          file.parallelLines.left.push(this.getOriginHeaderLine(id));
-          file.parallelLines.right.push(this.getHeadHeaderLine(id));
+          linesObj.left.push(this.getOriginHeaderLine(id));
+          linesObj.right.push(this.getHeadHeaderLine(id));
         }
 
         lines.forEach( (line) => {
@@ -68,40 +69,49 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
           if (conflict) {
             if (type === 'old') {
-              file.parallelLines.left.push(this.getLineForParallelView(line, id, 'conflict'));
+              linesObj.left.push(this.getLineForParallelView(line, id, 'conflict'));
             }
             else if (type === 'new') {
-              file.parallelLines.right.push(this.getLineForParallelView(line, id, 'conflict', true));
+              linesObj.right.push(this.getLineForParallelView(line, id, 'conflict', true));
             }
           }
           else {
             const lineType = type || 'context';
 
-            file.parallelLines.left.push (this.getLineForParallelView(line, id, lineType));
-            file.parallelLines.right.push(this.getLineForParallelView(line, id, lineType, true));
+            linesObj.left.push (this.getLineForParallelView(line, id, lineType));
+            linesObj.right.push(this.getLineForParallelView(line, id, lineType, true));
           }
         });
 
-        this.checkLineLengths(file);
+        this.checkLineLengths(linesObj);
       });
+
+      for (let i = 0, len = linesObj.left.length; i < len; i++) {
+        file.parallelLines.push([
+          linesObj.left[i],
+          linesObj.right[i]
+        ]);
+      }
+
     });
+
   }
 
 
-  checkLineLengths(file) {
-    let { left, right } = file.parallelLines;
+  checkLineLengths(linesObj) {
+    let { left, right } = linesObj;
 
     if (left.length !== right.length) {
       if (left.length > right.length) {
         const diff = left.length - right.length;
         for (let i = 0; i < diff; i++) {
-          file.parallelLines.right.push({ lineType: 'emptyLine', richText: '' });
+          right.push({ lineType: 'emptyLine', richText: '' });
         }
       }
       else {
         const diff = right.length - left.length;
         for (let i = 0; i < diff; i++) {
-          file.parallelLines.left.push({ lineType: 'emptyLine', richText: '' });
+          left.push({ lineType: 'emptyLine', richText: '' });
         }
       }
     }
@@ -152,16 +162,18 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
         }
       });
 
+      file.parallelLines.forEach( (lines) => {
+        const left         = lines[0];
+        const right        = lines[1];
+        const hasSameId    = right.id === sectionId || left.id === sectionId;
+        const isLeftMatch  = left.hasConflict || left.isHeader;
+        const isRightMatch = right.hasConflict || right.isHeader;
 
-      for (section in file.parallelLines) {
-        const lines = file.parallelLines[section];
-
-        lines.forEach( (line) => {
-          if (line.id === sectionId && (line.hasConflict || line.isHeader )) {
-            this.markLine(line, selection);
+        if (hasSameId && (isLeftMatch || isRightMatch)) {
+          this.markLine(left, selection);
+          this.markLine(right, selection);
         }
       })
-      }
     });
   }
 

app/assets/stylesheets/pages/merge_conflicts.scss

@@ -19,6 +19,50 @@ $unselected_line:         #f8f8f8;
     min-height: 19px;
   }
 
+
+  .header.line_content, .diff-line-num {
+    &.origin {
+      background-color: $origin_gutter;
+      &.selected {
+        background-color: $selected_origin_gutter;
+      }
+      &.unselected {
+        background-color: $unselected_gutter;
+      }
+    }
+    &.head {
+      background-color: $head_gutter;
+      &.selected {
+        background-color: $selected_head_gutter;
+      }
+      &.unselected {
+        background-color: $unselected_gutter;
+      }
+    }
+  }
+
+  .line_content {
+    &.origin {
+      background-color: $origin_line;
+      &.selected {
+        background-color: $selected_origin_line;
+      }
+      &.unselected {
+        background-color: $unselected_line;
+      }
+    }
+    &.head {
+      background-color: $head_line;
+      &.selected {
+        background-color: $selected_head_line;
+      }
+      &.unselected {
+        background-color: $unselected_line;
+      }
+    }
+  }
+
+
   .head {
     .header, .diff-line-num {
       background-color: $head_gutter;
@@ -71,17 +115,6 @@ $unselected_line:         #f8f8f8;
     }
   }
 
-  .parallel-view {
-    .diff-content {
-      overflow: hidden;
-
-      table {
-        width: 50%;
-        float: left;
-      }
-    }
-  }
-
   .parallel .header {
     button {
       right: 10px;

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

@@ -43,31 +43,42 @@
           .file-actions
             %a.btn.view-file.btn-file-option{":href" => "file.blobLink"}
               View file @{{conflictsData.shortCommitSha}}
-
         .diff-content.diff-wrap-lines
           .diff-wrap-lines.code.file-content.js-syntax-highlight.white
-            %table{"v-for" => "(key, group) in file.parallelLines"}
-              %tr.line_holder.parallel{"v-for" => "line in group", |
-                ":class" => "{ |
+            %table
+              %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
+                %template{"v-for" => "line in section"}
+
+                  %template{"v-if" => "line.isHeader"}
+                    %td.diff-line-num.header{":class" => "{ |
                       'head': line.isHead, |
                       'origin': line.isOrigin, |
-                  'match': line.hasMatch, |
                       'selected': line.isSelected, |
-                  'unselected': line.isUnselected }"}
-
-                %template{"v-if" => "line.isHeader"}
-                  %td.diff-line-num.header
-                  %td.line_content.header
+                      'unselected': line.isUnselected}"}
+                    %td.line_content.header{":class" => "{ |
+                      'head': line.isHead, |
+                      'origin': line.isOrigin, |
+                      'selected': line.isSelected, |
+                      'unselected': line.isUnselected}"}
                       %strong {{line.richText}}
                       %button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this
 
                   %template{"v-if" => "!line.isHeader"}
-                  %td.diff-line-num.old_line
+                    %td.diff-line-num.old_line{":class" => "{ |
+                      'head': line.isHead, |
+                      'origin': line.isOrigin, |
+                      'match': line.hasMatch, |
+                      'selected': line.isSelected, |
+                      'unselected': line.isUnselected }"}
                       {{line.lineNumber}}
-                  %td.line_content
+                    %td.line_content.parallel{":class" => "{ |
+                      'head': line.isHead, |
+                      'origin': line.isOrigin, |
+                      'match': line.hasMatch, |
+                      'selected': line.isSelected, |
+                      'unselected': line.isUnselected }"}
                       {{{line.richText}}}
 
-
     .files{"v-if" => "!isParallel"}
       .diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"}
         .file-title