Fix overflow issues with monaco file editor

*What happened?*
`pre` has some `overflow: auto` rules which
causes issues when loading the monaco
editor that expects to not have `overflow: visible`
on the parent.

*What's the fix?*
We really shouldn't put elements under a `pre`, so
this MR moves `pre` inside the #editor elements
to help present the content while the editor
bit is loading.

app/assets/javascripts/blob/components/blob_edit_content.vue

@@ -41,6 +41,8 @@ export default {
 </script>
 <template>
   <div class="file-content code">
-    <pre id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">{{ value }}</pre>
+    <div id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">
+      <pre class="editor-loading-content">{{ value }}</pre>
+    </div>
   </div>
 </template>

app/assets/stylesheets/pages/editor.scss

@@ -16,6 +16,11 @@
     padding: 0;
     position: relative;
     width: 100%;
+
+    .editor-loading-content {
+      height: 100%;
+      border: 0;
+    }
   }
 
   .ace_gutter-cell {

app/views/projects/blob/_editor.html.haml

@@ -40,7 +40,8 @@
         = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2', tabindex: '-1'
 
   .file-editor.code
-    %pre.js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }= params[:content] || local_assigns[:blob_data]
+    .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
+      %pre.editor-loading-content= params[:content] || local_assigns[:blob_data]
     - if local_assigns[:path]
       .js-edit-mode-pane#preview.hide
         .center

app/views/shared/snippets/_form.html.haml

@@ -29,7 +29,8 @@
           .js-file-title.file-title-flex-parent
             = f.text_field :file_name, placeholder: s_("Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby"), class: 'form-control js-snippet-file-name', data: { qa_selector: 'file_name_field' }
           .file-content.code
-            %pre#editor{ data: { 'editor-loading': true } }= @snippet.content
+            #editor{ data: { 'editor-loading': true } }<
+              %pre.editor-loading-content= @snippet.content
             = f.hidden_field :content, class: 'snippet-file-content'
 
       .form-group

changelogs/unreleased/229468-fix-overflow-issues-with-monaco-file-editor.yml

+---
+title: Fix overflow issues with monaco file editor
+merge_request: 37984
+author:
+type: fixed

spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap

@@ -4,11 +4,15 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = `
 <div
   class="file-content code"
 >
-  <pre
+  <div
     data-editor-loading=""
     id="editor"
   >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </pre>
+    <pre
+      class="editor-loading-content"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </pre>
+  </div>
 </div>
 `;