Make the height of the editor in Review Box smaller (4 lines as GitHub) (#18319)

And shrink the height of Dropzone.

2 files changed, 7 insertions, 4 deletions

diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js
index 922d03d396..3a2f935dc2 100644
--- a/web_src/js/features/comp/EasyMDE.js
+++ b/web_src/js/features/comp/EasyMDE.js
@@ -50,9 +50,10 @@ export async function importEasyMDE() {
 /**
  * create an EasyMDE editor for comment
  * @param textarea jQuery or HTMLElement
+ * @param easyMDEOptions the options for EasyMDE
  * @returns {null|EasyMDE}
  */
-export async function createCommentEasyMDE(textarea) {
+export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
   if (textarea instanceof jQuery) {
     textarea = textarea[0];
   }
@@ -61,6 +62,7 @@ export async function createCommentEasyMDE(textarea) {
   }
 
   const EasyMDE = await importEasyMDE();
+
   const easyMDE = new EasyMDE({
     autoDownloadFontAwesome: false,
     element: textarea,
@@ -104,8 +106,7 @@ export async function createCommentEasyMDE(textarea) {
         className: 'fa fa-file',
         title: 'Revert to simple textarea',
       },
-    ],
-  });
+    ], ...easyMDEOptions});
   const inputField = easyMDE.codemirror.getInputField();
   inputField.classList.add('js-quick-submit');
   easyMDE.codemirror.setOption('extraKeys', {
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 59d5e7b286..4bdf953822 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -459,7 +459,9 @@ export function initRepoPullRequestReview() {
   const $reviewBox = $('.review-box');
   if ($reviewBox.length === 1) {
     (async () => {
-      await createCommentEasyMDE($reviewBox.find('textarea'));
+      // the editor's height is too large in some cases, and the panel cannot be scrolled with page now because there is `.repository .diff-detail-box.sticky { position: sticky; }`
+      // the temporary solution is to make the editor's height smaller (about 4 lines). GitHub also only show 4 lines for default. We can improve the UI (including Dropzone area) in future
+      await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'});
       initCompImagePaste($reviewBox);
     })();
   }