2 files changed, 20 insertions, 2 deletions
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 9c14c1596b7..2d3ee7d4f48 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -69,6 +69,7 @@ export default class Editor {
           occurrencesHighlight: false,
           renderLineHighlight: 'none',
           hideCursorInOverviewRuler: true,
+          renderSideBySide: Editor.renderSideBySide(domElement),
         })),
       );
 
@@ -81,7 +82,7 @@ export default class Editor {
   }
 
   attachModel(model) {
-    if (this.instance.getEditorType() === 'vs.editor.IDiffEditor') {
+    if (this.isDiffEditorType) {
       this.instance.setModel({
         original: model.getOriginalModel(),
         modified: model.getModel(),
@@ -153,6 +154,7 @@ export default class Editor {
 
   updateDimensions() {
     this.instance.layout();
+    this.updateDiffView();
   }
 
   setPosition({ lineNumber, column }) {
@@ -171,4 +173,20 @@ export default class Editor {
 
     this.disposable.add(this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)));
   }
+
+  updateDiffView() {
+    if (!this.isDiffEditorType) return;
+
+    this.instance.updateOptions({
+      renderSideBySide: Editor.renderSideBySide(this.instance.getDomNode()),
+    });
+  }
+
+  get isDiffEditorType() {
+    return this.instance.getEditorType() === 'vs.editor.IDiffEditor';
+  }
+
+  static renderSideBySide(domElement) {
+    return domElement.offsetWidth >= 700;
+  }
 }
diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js
index a213862f9b3..9f895d49f2e 100644
--- a/app/assets/javascripts/ide/lib/editor_options.js
+++ b/app/assets/javascripts/ide/lib/editor_options.js
@@ -6,7 +6,7 @@ export const defaultEditorOptions = {
   minimap: {
     enabled: false,
   },
-  wordWrap: 'bounded',
+  wordWrap: 'on',
 };
 
 export default [