Fix the editor height in review box (#19003) (#19147)

Backport #19003 Fix the height problem in #18862 (comment) Co-authored-by: wxiaoguang <[email protected]>
go-gitea · Mar 20, 2022 · ea56bdc · ea56bdc
1 parent 45c836b
commit ea56bdc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
@@ -461,7 +461,8 @@ export function initRepoPullRequestReview() {
     (async () => {
       // 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', maxHeight: 'calc(100vh - 360px)'});
+      // EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set max-height for .CodeMirror-scroll in CSS.
+      await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'});
       initCompImagePaste($reviewBox);
     })();
   }

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
@@ -197,6 +197,13 @@ a.blob-excerpt:hover {
   color: #fff;
 }
 
+// See the comment of createCommentEasyMDE() for the review editor
+// EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code
+#review-box .CodeMirror-scroll {
+  min-height: 80px;
+  max-height: calc(100vh - 360px);
+}
+
 @media @mediaSm {
   #review-box > .menu {
     > .ui.segment {