1 files changed, 9 insertions, 3 deletions
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 05493db1dff..f14d86114b8 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -147,6 +147,9 @@ export default {
     fileType() {
       return this.previewMode?.id || '';
     },
+    showTabs() {
+      return !this.shouldHideEditor && this.isEditModeActive && this.previewMode;
+    },
   },
   watch: {
     'file.name': {
@@ -194,6 +197,9 @@ export default {
         this.refreshEditorDimensions();
       }
     },
+    showTabs() {
+      this.$nextTick(() => this.refreshEditorDimensions());
+    },
     rightPaneIsOpen() {
       this.refreshEditorDimensions();
     },
@@ -410,7 +416,7 @@ export default {
       }
     },
     refreshEditorDimensions() {
-      if (this.showEditor) {
+      if (this.showEditor && this.editor) {
         this.editor.updateDimensions();
       }
     },
@@ -495,7 +501,7 @@ export default {
 
 <template>
   <div id="ide" class="blob-viewer-container blob-editor-container">
-    <div v-if="!shouldHideEditor && isEditModeActive" class="ide-mode-tabs clearfix">
+    <div v-if="showTabs" class="ide-mode-tabs clearfix">
       <ul class="nav-links float-left border-bottom-0">
         <li :class="editTabCSS">
           <a
@@ -506,7 +512,7 @@ export default {
             >{{ __('Edit') }}</a
           >
         </li>
-        <li v-if="previewMode" :class="previewTabCSS">
+        <li :class="previewTabCSS">
           <a
             href="javascript:void(0);"
             role="button"