Merge pull request #3847 from overleaf/ae-user-select-out-of-sync

Display the Out Of Sync modal file contents in a readonly textarea

GitOrigin-RevId: b91ff3ad32c3ed07987858e83571887ae356f4f3

services/web/app/views/project/editor.pug

@@ -151,7 +151,7 @@ block content
 			)
 				| {{showFileContents ? "Hide" : "Show"}} Local File Contents
 			.text-preview(ng-show="showFileContents")
-				.scroll-container
+				textarea.scroll-container(readonly="readonly" rows="{{editorContentRows}}")
 					| {{editorContent}}
 
 		.modal-footer

services/web/frontend/js/ide/services/ide.js

@@ -162,6 +162,7 @@ App.controller('OutOfSyncModalController', function(
   $scope.title = title
   $scope.message = message
   $scope.editorContent = editorContent
+  $scope.editorContentRows = editorContent.split('\n').length
 
   $scope.done = () => {
     // Reload the page to avoid staying in an inconsistent state.

services/web/frontend/stylesheets/app/editor.less

@@ -494,6 +494,7 @@ CodeMirror
     margin-top: @line-height-computed / 2;
     .scroll-container {
       max-height: 360px;
+      width: 100%;
       background-color: white;
       font-size: 0.8em;
       line-height: 1.1em;