From ea56bdca5f5f0575197e6741b0c815f40b1b3a1f Mon Sep 17 00:00:00 2001 From: zeripath Date: Sun, 20 Mar 2022 02:29:49 +0000 Subject: [PATCH] Fix the editor height in review box (#19003) (#19147) Backport #19003 Fix the height problem in https://github.com/go-gitea/gitea/pull/18862#issuecomment-1059329539 Co-authored-by: wxiaoguang --- web_src/js/features/repo-issue.js | 3 ++- web_src/less/_review.less | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 1999233ca229d..9ee5e4f04ea6d 100644 --- 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 index 1070ad7ddedcf..ac9f57cfbedfd 100644 --- 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 {