Fix overflow issues with monaco file editor
What does this MR do?
This MR fixes #229468 (closed) where an outer scroll container is conflicting with Monaco's built in scroll container. This outer scroll container is actually caused by using a <pre>
tag for the root element for our editor.
This MR updates all #editor
elements to use a <div>
with a <pre>
child, wrapping it's inner content, so that the preloaded state still looks nice with preformatted text.
Screenshots
Description | Before | After |
---|---|---|
Blob edit (with Feature.disable(:monaco_blobs) ) |
||
Blob edit (with Feature.enable(:monaco_blobs) ) |
20200727_overflow_before_blob_on | 20200727_after_blob_on |
Snippets edit (with Feature.disable(:snippets_edit_vue) ) |
||
Snippets edit (with Feature.enable(:snippets_edit_vue) ) |
||
Blob editor loading (shows for a split second) | ||
Snippet editor loading (shows for a split second) |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
References
Edited by Paul Slaughter