diff --git a/frontend/src/components/review-list-view/review-comments.js b/frontend/src/components/review-list-view/review-comments.js
index c950a30edf..9114756912 100644
--- a/frontend/src/components/review-list-view/review-comments.js
+++ b/frontend/src/components/review-list-view/review-comments.js
@@ -8,11 +8,10 @@ import { username } from '../../utils/constants.js';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 
-import '../../css/review-comments.css';
+import '../../css/comments-list.css';
 
 const commentPropTypes = {
   listComments: PropTypes.func.isRequired,
-  inResizing: PropTypes.bool.isRequired,
   commentsList: PropTypes.array.isRequired,
   scrollToQuote: PropTypes.func.isRequired
 };
@@ -22,8 +21,6 @@ class ReviewComments extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      inResizing: false,
-      commentFooterHeight: 25,
       showResolvedComment: true,
       comment: '',
     };
@@ -64,10 +61,6 @@ class ReviewComments extends React.Component {
     });
   }
 
-  toggleResolvedComment = () => {
-    this.setState({ showResolvedComment: !this.state.showResolvedComment });
-  }
-
   deleteComment = (event) => {
     seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => {
       this.props.listComments();
@@ -77,31 +70,6 @@ class ReviewComments extends React.Component {
     });
   }
 
-  onResizeMouseUp = () => {
-    if (this.state.inResizing) {
-      this.setState({ inResizing: false });
-    }
-  }
-
-  onResizeMouseDown = () => {
-    this.setState({ inResizing: true });
-  };
-
-  onResizeMouseMove = (event) => {
-    let rate = 100 - (event.nativeEvent.clientY - 120 ) / this.refs.comment.clientHeight * 100;
-    if (rate < 20 || rate > 70) {
-      if (rate < 20) {
-        this.setState({ commentFooterHeight: 25 });
-      }
-      if (rate > 70) {
-        this.setState({ commentFooterHeight: 65 });
-      }
-      this.setState({ inResizing: false });
-      return null;
-    }
-    this.setState({ commentFooterHeight: rate });
-  };
-
   scrollToQuote = (newIndex, oldIndex, quote) => {
     this.props.scrollToQuote(newIndex, oldIndex, quote);
     this.setState({ comment: '' });
@@ -117,33 +85,13 @@ class ReviewComments extends React.Component {
   }
 
   render() {
-    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     const { commentsList } = this.props;
     return (
-      <div className={(this.state.inResizing || this.props.inResizing)?
-        'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
-      onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="comment">
-        <div className="seafile-comment-title">
-          <div className={'seafile-comment-title-text'}>{gettext('Show resolved comments')}</div>
-          <div className={'seafile-comment-title-toggle'}>
-            <label className="custom-switch" id="toggle-resolved-comments">
-              <input type="checkbox" name="option" className="custom-switch-input"
-                onChange={this.toggleResolvedComment}
-                checked={this.state.showResolvedComment && 'checked'}
-              />
-              <span className="custom-switch-indicator"></span>
-            </label>
-          </div>
-        </div>
-        <div style={{height:(100 - this.state.commentFooterHeight)+'%'}}>
-          {commentsList.length === 0 &&
-            <div className="seafile-comment-list">
-              <div className="comment-vacant">{gettext('No comment yet.')}</div>
-            </div>
-          }
-          <ul className="seafile-comment-list" ref='commentsList'>
-            {(commentsList.length > 0) &&
-              commentsList.map((item, index) => {
+      <div className="seafile-comment h-100">
+        <div className="flex-fill o-auto">
+          {commentsList.length > 0 ? (
+            <ul className="seafile-comment-list" ref='commentsList'>
+              {commentsList.map((item, index) => {
                 return (
                   <CommentItem
                     item={item}
@@ -155,21 +103,22 @@ class ReviewComments extends React.Component {
                     deleteComment={this.deleteComment}
                   />
                 );
-              })
-            }
-          </ul>
+              })}
+            </ul>
+          ) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
+          }
         </div>
-        <div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}>
-          <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
-          <div className="seafile-add-comment">
-            <textarea
-              className="add-comment-input"
-              value={this.state.comment}
-              placeholder={gettext('Add a comment.')}
-              onChange={this.handleCommentChange}
-              clos="100" rows="3" warp="virtual"
-            ></textarea>
-            <Button className="comment-btn" color="primary" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
+        <div className="seafile-comment-footer flex-shrink-0">
+          <textarea
+            className="add-comment-input"
+            value={this.state.comment}
+            placeholder={gettext('Add a comment.')}
+            onChange={this.handleCommentChange}
+            clos="100" rows="3" warp="virtual"
+          ></textarea>
+          <div className="comment-submit-container">
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/css/comments-list.css b/frontend/src/css/comments-list.css
index 7bdbe3e6c7..7cf3410183 100644
--- a/frontend/src/css/comments-list.css
+++ b/frontend/src/css/comments-list.css
@@ -1,6 +1,5 @@
 .seafile-comment {
   background-color: #f5f5f5;
-  border-left: 1px solid #e6e6dd;
   display: flex;
   flex-direction: column;
 }
@@ -92,17 +91,26 @@
 .seafile-comment-footer {
   padding: 10px;
   border-top: 1px solid #e5e5e5;
-  min-height: 182px;
+  display: flex;
+  flex-direction: column;
 }
+.seafile-comment-footer .add-comment-input,
 .seafile-edit-comment .edit-comment-input {
   border: 1px solid #e6e6dd;
   padding: 5px;
-  width: 23em;
+  width: 100%;
   min-height: 90px;
   border-radius: 5px;
   background-color: #fff;
 }
 
+.seafile-comment-footer .add-comment-input {
+  border-bottom: none;
+  border-radius: 5px 5px 0 0;
+}
+.seafile-comment-footer .add-comment-input:focus {
+  outline: none;
+}
 .seafile-comment-footer .comment-submit-container {
   border: 1px solid #e6e6dd;
   border-top: none;
@@ -126,12 +134,3 @@
 .seafile-edit-comment .comment-btn {
   height: 28px;
 }
-.detail-comments {
-  border-left: 0;
-}
-.detail-comments .seafile-comment-footer {
-  min-height: 175px;
-}
-.detail-comments .seafile-edit-comment .edit-comment-input {
-  width: 100%;
-}
diff --git a/frontend/src/css/draft.css b/frontend/src/css/draft.css
index 9ff939d12c..498ff1178b 100644
--- a/frontend/src/css/draft.css
+++ b/frontend/src/css/draft.css
@@ -26,13 +26,9 @@
   height: 100%;
 }
 
-.main .cur-view-container .seafile-comment {
-  height: 100%;
-  position: relative;
-}
 .main .cur-view-right-part {
   height: 100%;
-  width: 35%;
+  width: 300px;
   position: relative;
 }
 
@@ -118,7 +114,8 @@
 .review-side-panel-item:last-child {
   border: 0;
 }
-.reviewer-info, .author-info {
+.review-side-panel-item .reviewer-info,
+.review-side-panel-item .author-info {
   display: flex;
   align-items: center;
 }
@@ -144,7 +141,8 @@
   height: 1.5rem;
   width: 1.5rem;
 }
-.reviewer-name, .author-name {
+.review-side-panel-item .reviewer-name,
+.review-side-panel-item .author-name {
   height: 2rem;
   line-height: 2rem;
 }
diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
index c476b7dff3..c2674fe941 100644
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -68,5 +68,6 @@ body {
 @media (min-width: 768px) {
   .file-view-body .seafile-comment {
     width: 300px;
+    border-left: 1px solid #e6e6dd;
   }
 }
diff --git a/frontend/src/css/review-comments.css b/frontend/src/css/review-comments.css
deleted file mode 100644
index 3c9e6a066c..0000000000
--- a/frontend/src/css/review-comments.css
+++ /dev/null
@@ -1,169 +0,0 @@
-.review-side-panel .seafile-comment {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background-color: #fff;
-}
-.seafile-comment-resizing {
-  user-select: none;
-}
-.seafile-comment-title {
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 2em;
-  padding: 2px 1em;
-  display: flex;
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  background-color: #fff;
-}
-.seafile-comment-title .seafile-comment-title-text {
-  width: 100%;
-}
-.seafile-comment-title .seafile-comment-title-toggle {
-  display: flex;
-}
-.seafile-comment-list {
-  padding-top: 35px;
-  box-sizing: border-box;
-  height: 100%;
-  overflow-y: auto;
-}
-.seafile-comment .loading-icon {
-  margin-top: 20px;
-}
-.seafile-comment-list .comment-vacant {
-  padding: 15px;
-  text-align: center;
-}
-.seafile-comment-item {
-  padding: 15px 10px;
-}
-.seafile-comment-item-resolved {
-  background-color: #e6ffed;
-}
-.seafile-comment-item .seafile-comment-info {
-  display: flex;
-}
-.seafile-comment-item .seafile-comment-info .reviewer-info {
-  padding-left: 10px;
-  height: 2rem;
-  display: block;
-  max-width: 75%;
-}
-.seafile-comment-item .seafile-comment-info .reviewer-name {
-  font-size: 1rem;
-  height: 1rem;
-  line-height: 1rem;
-}
-.seafile-comment-item .seafile-comment-info .review-time {
-  margin-top: 2px;
-  font-size: .6rem;
-  color: #777;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown {
-  margin-left: auto;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button,
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover,
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus
- {
-  border: none;
-  box-shadow: none;
-  background-color: #fff;
-  height: 100%;
-}
-.seafile-comment-dropdown button:hover i {
-  color: #555;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn {
-  color: #999;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn {
-  color: #555;
-}
-.seafile-comment-item .seafile-comment-content {
-  margin: 10px 0 0 40px;
-}
-.seafile-comment-item .seafile-comment-content ol,
-.seafile-comment-item .seafile-comment-content ul,
-.seafile-comment-item .seafile-comment-content li {
-  margin-left: 10px;
-}
-.seafile-comment-item .seafile-comment-content table,
-.seafile-comment-item .seafile-comment-content th,
-.seafile-comment-item .seafile-comment-content td {
-  border: 1px solid #333;
-}
-.seafile-comment-item blockquote {
-  word-wrap: break-word;
-  overflow: hidden;
-  padding-left: 1rem;
-  cursor: pointer;
-}
-.seafile-comment-row-resize {
-  height: 5px;
-  width: 100%;
-  background-color: transparent;
-  position: absolute;
-  left: 0;
-  top: 0;
-  cursor: row-resize;
-  z-index: 1;
-}
-.seafile-comment-footer {
-  background-color: #fafaf9;
-  border-top: 1px solid #e5e5e5;
-  min-height: 120px;
-  position: absolute;
-  bottom: 0;
-  padding-top: 0;
-  width: 100%;
-}
-.seafile-comment-footer .seafile-add-comment {
-  margin: 10px 20px 5px 15px;
-  height: 100%;
-}
-.seafile-add-comment .add-comment-input,
-.seafile-edit-comment .edit-comment-input {
-  box-sizing: border-box;
-  background-color: #fff;
-  border: 1px solid #e6e6dd;
-  padding: 5px;
-  height: calc(100% - 50px);
-  min-height: 70px;
-  width: 100%;
-  resize: none;
-  border-radius: 5px;
-}
-.seafile-comment-footer .seafile-add-comment .comment-btn,
-.seafile-edit-comment .comment-btn {
-  height: 28px;
-  margin-top: 5px;
-  width: fit-content;
-  display: inline-block;
-}
-.seafile-edit-comment {
-  margin-top: 10px;
-}
-@media (max-width: 992px) {
-  .seafile-comment-footer {
-    min-height: 80px;
-  }
-  .seafile-comment-footer .seafile-add-comment .add-comment-input {
-    min-height: 30px;
-  }
-  .seafile-comment-list .comment-vacant {
-    padding: 10px;
-  }
-  .seafile-comment {
-    font-size: 12px;
-  }
-  .seafile-comment-footer .seafile-add-comment .comment-btn {
-    height: 24px;
-  }
-  .seafile-comment-footer {
-    min-height: 120px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/draft.js b/frontend/src/draft.js
index 101a991b8e..8b730ebc54 100644
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -54,7 +54,7 @@ class Draft extends React.Component {
       showReviewerDialog: false,
       reviewers: [],
       inResizing: false,
-      rightPartWidth: 30,
+      rightPartWidth: 300 / window.innerWidth * 100,
       draftStatus: draftStatus,
     };
     this.quote = '';