Improve markdown editor: width, height, preferred (#23895)

Follow #23876


1. Fine tune the heights of the editors (like before)
    * Auto expand the editor (increase/decrease the height) when editing
2. Remember user's last used editor (textarea/easymde) in LocalStorage,
then next time the editor will be switched automatically
* No need to introduce extra config option, it satisfies all users,
including who prefer EasyMDE
3. Also fix the width problem of Review Panel

Screenshot:

<details>


![image](https://user-images.githubusercontent.com/2114189/229518585-2e05827e-8355-48f3-a20c-2c8b9e60ce74.png)


![image](https://user-images.githubusercontent.com/2114189/229518173-4caa6da7-6ad9-40e9-bf1a-ceddfcd4b37f.png)


![image](https://user-images.githubusercontent.com/2114189/229507886-148e9b84-9b58-46d1-ba3f-727e1396f476.png)


![image](https://user-images.githubusercontent.com/2114189/229518258-9f522294-1e64-4b06-91ab-ab43b0353aaa.png)


![image](https://user-images.githubusercontent.com/2114189/229507752-6d540ac7-7748-4bb6-bc09-28acab32d31b.png)


![image](https://user-images.githubusercontent.com/2114189/229510899-de322af5-57e8-4dc5-9a61-771a3b1bee79.png)


</details>

---------

Co-authored-by: silverwind <me@silverwind.io>

3 files changed, 16 insertions, 33 deletions

diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css
index 31ffeb06d0..da64164aec 100644
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor-markdown.css
@@ -18,8 +18,15 @@
   cursor: pointer;
 }
 
-.combo-markdown-editor .markdown-text-editor {
+.ui.form .combo-markdown-editor textarea.markdown-text-editor,
+.combo-markdown-editor textarea.markdown-text-editor {
   display: block;
   width: 100%;
-  height: 200px;
+  min-height: 200px;
+  max-height: calc(100vh - 200px);
+  resize: vertical;
+}
+
+.combo-markdown-editor .CodeMirror-scroll {
+  max-height: calc(100vh - 200px);
 }
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index b4bfd17352..de1c2eda58 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -544,10 +544,6 @@
   margin: 0;
 }
 
-.repository .comment textarea {
-  max-height: none !important;
-}
-
 .repository.new.issue .comment.form .comment .avatar {
   width: 3em;
 }
@@ -1068,11 +1064,6 @@
   min-height: 5rem;
 }
 
-.repository.view.issue .comment-list .comment .ui.form textarea {
-  height: 200px;
-  font-family: var(--fonts-monospace);
-}
-
 .repository.view.issue .comment-list .comment .edit.buttons {
   margin-top: 10px;
 }
@@ -1191,15 +1182,6 @@
   margin-top: -8px;
 }
 
-.repository .comment.form .content textarea {
-  height: 200px;
-  font-family: var(--fonts-monospace);
-}
-
-.repository .comment.form .content .CodeMirror-scroll {
-  max-height: 85vh;
-}
-
 .repository .milestone.list {
   list-style: none;
   padding-top: 15px;
@@ -2123,9 +2105,6 @@
   margin-top: 0;
 }
 
-.repository.wiki .form .CodeMirror-scroll {
-  max-height: 85vh;
-}
 
 @media (max-width: 767px) {
   .repository.wiki .dividing.header .stackable.grid .button {
diff --git a/web_src/css/review.css b/web_src/css/review.css
index c00a536491..0111311d3c 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -154,8 +154,11 @@
   margin: 0.5em;
 }
 
+.comment-code-cloud .editor-statusbar {
+  display: none;
+}
+
 .comment-code-cloud .footer {
-  border-top: 1px solid var(--color-secondary);
   padding: 10px 0;
 }
 
@@ -218,15 +221,9 @@ a.blob-excerpt:hover {
   max-height: calc(100vh - 360px);
 }
 
-.review-box-panel .editor-toolbar,
-.review-box-panel .CodeMirror-scroll {
-  width: min(calc(100vw - 2em), 800px);
-  max-width: none;
-}
-
-.review-box-panel .combo-markdown-editor textarea {
-  width: 730px;
-  max-width: calc(100vw - 70px);
+.review-box-panel .combo-markdown-editor {
+  width: 730px; /* this width matches current EasyMDE's toolbar's width */
+  max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
 }
 
 #review-box {