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

And shrink the height of Dropzone.

3 files changed, 20 insertions, 11 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);
     })();
   }
diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less
index 1a54457129..d31aedff3e 100644
--- a/web_src/less/features/dropzone.less
+++ b/web_src/less/features/dropzone.less
@@ -1,10 +1,16 @@
-.dropzone {
-  border: 2px dashed var(--color-secondary) !important;
-  background: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  min-height: 5rem !important;
-  border-radius: 4px !important;
+.ui .field {
+  .dropzone {
+    border: 2px dashed var(--color-secondary);
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    border-radius: 4px;
+    min-height: 0;
+    margin-top: -1em; // we have another `field` above, it's usually an EasyMDE editor with "status bar", so we do not need the space above.
+    .dz-message {
+      margin: 10px 0;
+    }
+  }
 }
 
 .dropzone .dz-button {