fix

frontend/src/components/review-list-view/review-comment-dialog.js

@@ -12,7 +12,6 @@ const commentDialogPropTypes = {
   selectedText: PropTypes.string,
   newIndex: PropTypes.number,
   oldIndex: PropTypes.number,
-  top: PropTypes.string
 };
 
 class ReviewCommentDialog extends React.Component {
@@ -88,9 +87,8 @@ class ReviewCommentDialog extends React.Component {
   }
 
   render() {
-    let dialogTop = (parseInt(this.props.top) - 80)+ 'px';
     return (
-      <div className="review-comment-dialog" style={{top: (dialogTop)}}>
+      <div className="review-comment-dialog">
         <div>{this.state.userName}</div>
         <textarea value={this.state.comment} onChange={this.handleCommentChange}></textarea>
         <div className="button-group">

frontend/src/css/review-comment-dialog.css

@@ -1,15 +1,13 @@
 .review-comment-dialog {
-  width: 300px;
+  width: 500px;
   position: absolute;
-  top: 200px;
+  top: 30%;
   right: 0;
   padding: 10px;
   background-color: #fafafa;
-  background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.2);
   border-radius: .3rem;
-  outline: 0;
-  box-shadow: 0 0 5px #aaaaaa;
+  box-shadow: 0 0 3px #ccc;
 }
 .review-comment-dialog-triangle {
   position: absolute;
@@ -21,14 +19,13 @@
   border-right: none;
   width: 10px;
   height: 10px;
-  z-index: 1001;
   background-color: #fafafa;
-  box-shadow: -1px 1px #aaaaaa;
+  box-shadow: -1px 1px #ccc;
 }
 .review-comment-dialog textarea {
   width: 100%;
-  min-height: 100px;
-  max-height: 200px;
+  min-height: 200px;
+  max-height: 300px;
 }
 .review-comment-dialog .button-group .btn {
   margin-right: 10px;

frontend/src/css/review-comments.css

@@ -96,6 +96,11 @@
 .seafile-comment-item .seafile-comment-content td {
   border: 1px solid #333;
 }
+.seafile-comment-item .seafile-comment-content blockquote {
+  word-wrap: break-word;
+  overflow: hidden;
+  margin-right: 10px;
+}
 .seafile-comment-row-resize {
   height: 5px;
   width: 100%;

frontend/src/draft-review.js

@@ -22,7 +22,6 @@ import { findRange } from '@seafile/slate-react';
 import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import classnames from 'classnames';
 import HistoryList from './pages/review/history-list';
-import Plain from 'slate-plain-serializer';
 import { Document, Block, Value } from 'slate';
 
 import './assets/css/fa-solid.css';
@@ -55,7 +54,6 @@ class DraftReview extends React.Component {
       totalReversionCount: 0,
       changedNodes: [],
       isShowCommentDialog: false,
-      commentBtnTop: '-1000px',
     };
     this.selectedText = '';
     this.newIndex = null;
@@ -239,11 +237,7 @@ class DraftReview extends React.Component {
         }
       }
       let style = this.refs.commentbtn.style;
-      let commentBtnTop = `${rect.top - 100 + this.refs.viewContent.scrollTop}px`;
-      style.top = commentBtnTop;
-      this.setState({
-        commentBtnTop: commentBtnTop
-      });
+      style.top = `${rect.top - 100 + this.refs.viewContent.scrollTop}px`;
       return range;
     }
     else {
@@ -557,16 +551,6 @@ class DraftReview extends React.Component {
                     />
                   }
                   <i className="fa fa-plus-square review-comment-btn" ref="commentbtn" onMouseDown={this.addComment}></i>
-                  {this.state.isShowCommentDialog &&
-                    <ReviewCommentDialog
-                      toggleCommentDialog={this.toggleCommentDialog}
-                      onCommentAdded={this.onCommentAdded}
-                      selectedText={this.selectedText}
-                      newIndex={this.newIndex}
-                      oldIndex={this.oldIndex}
-                      top={this.state.commentBtnTop}
-                    />
-                  }
                 </div>
               }
             </div>
@@ -645,6 +629,15 @@ class DraftReview extends React.Component {
             reviewers={this.state.reviewers}
           />
         }
+        {this.state.isShowCommentDialog &&
+          <ReviewCommentDialog
+            toggleCommentDialog={this.toggleCommentDialog}
+            onCommentAdded={this.onCommentAdded}
+            selectedText={this.selectedText}
+            newIndex={this.newIndex}
+            oldIndex={this.oldIndex}
+          />
+        }
       </div>
     );
   }