Change IDE diff view responsively

Closes #44305

2 files changed, 20 insertions, 5 deletions

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index b1a16350c19..383ec7740a6 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -13,7 +13,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['leftPanelCollapsed', 'rightPanelCollapsed', 'viewer', 'delayViewerUpdated']),
+    ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
     ...mapGetters(['currentMergeRequest']),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.raw;
@@ -26,15 +26,17 @@ export default {
         this.initMonaco();
       }
     },
-    leftPanelCollapsed() {
-      this.editor.updateDimensions();
-    },
     rightPanelCollapsed() {
       this.editor.updateDimensions();
     },
     viewer() {
       this.createEditorInstance();
     },
+    panelResizing() {
+      if (!this.panelResizing) {
+        this.editor.updateDimensions();
+      }
+    },
   },
   beforeDestroy() {
     this.editor.dispose();
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 6b4ba30e086..4f5106d1583 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -81,7 +81,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 +153,7 @@ export default class Editor {
 
   updateDimensions() {
     this.instance.layout();
+    this.updateDiffView();
   }
 
   setPosition({ lineNumber, column }) {
@@ -171,4 +172,16 @@ export default class Editor {
 
     this.disposable.add(this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)));
   }
+
+  updateDiffView() {
+    if (!this.isDiffEditorType) return;
+
+    this.instance.updateOptions({
+      renderSideBySide: this.instance.getDomNode().offsetWidth >= 700,
+    });
+  }
+
+  get isDiffEditorType() {
+    return this.instance.getEditorType() === 'vs.editor.IDiffEditor';
+  }
 }