long name comment (#3537)

* long name comment

* reviewer dialog name

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -115,9 +115,9 @@ class AddReviewerDialog extends React.Component {
             reviewers.map((item, index = 0, arr) => {
               return (
                 <div className="reviewer-select-info" key={index}>
-                  <div>
+                  <div className="d-flex">
                     <img className="avatar reviewer-select-avatar" src={item.avatar_url} alt=""/>
-                    <span className="reviewer-select-name">{item.user_name}</span>
+                    <span className="reviewer-select-name ellipsis">{item.user_name}</span>
                   </div>
                   <i className="fa fa-times" name={item.user_email} onClick={this.deleteReviewer}></i>
                 </div>

frontend/src/components/file-view/comment-panel.js

@@ -219,7 +219,7 @@ class CommentItem extends React.Component {
           <div className="seafile-comment-info">
             <img className="avatar" src={item.avatar_url} alt=""/>
             <div className="reviewer-info">
-              <div className="reviewer-name">{item.user_name}</div>
+              <div className="reviewer-name ellipsis">{item.user_name}</div>
               <div className="review-time">{this.props.time}</div>
             </div>
           </div>
@@ -237,7 +237,7 @@ class CommentItem extends React.Component {
         <div className="seafile-comment-info">
           <img className="avatar" src={item.avatar_url} alt=""/>
           <div className="reviewer-info">
-            <div className="reviewer-name">{item.user_name}</div>
+            <div className="reviewer-name ellipsis">{item.user_name}</div>
             <div className="review-time">{this.props.time}</div>
           </div>
           <Dropdown isOpen={this.state.dropdownOpen} size="sm"

frontend/src/components/review-list-view/review-comments.js

@@ -273,7 +273,7 @@ class CommentItem extends React.Component {
           <div className="seafile-comment-info">
             <img className="avatar" src={item.avatarUrl} alt=""/>
             <div className="reviewer-info">
-              <div className="reviewer-name">{item.name}</div>
+              <div className="reviewer-name ellipsis">{item.name}</div>
               <div className="review-time">{item.time}</div>
             </div>
           </div>
@@ -298,7 +298,7 @@ class CommentItem extends React.Component {
         <div className="seafile-comment-info">
           <img className="avatar" src={item.avatarUrl} alt=""/>
           <div className="reviewer-info">
-            <div className="reviewer-name">{item.name}</div>
+            <div className="reviewer-name ellipsis">{item.name}</div>
             <div className="review-time">{item.time}</div>
           </div>
           {!item.resolved &&

frontend/src/components/wiki-markdown-viewer.js

@@ -22,7 +22,7 @@ const propTypes = {
   path: PropTypes.string,
 };
 
-const contentClass = 'wiki-page-content w-100';
+const contentClass = 'wiki-page-content';
 
 class WikiMarkdownViewer extends React.Component {
 

frontend/src/css/comments-list.css

@@ -59,6 +59,7 @@
 }
 .seafile-comment-item .seafile-comment-info .reviewer-info {
   padding-left: 10px;
+  max-width: 75%;
 }
 .seafile-comment-item .seafile-comment-info .review-time {
   font-size: 10px;
@@ -126,3 +127,8 @@
 .seafile-edit-comment .comment-btn {
   height: 28px;
 }
+@media (max-width: 768px) {
+  .seafile-comment-toggle-resolved {
+    width: 100%;
+  }
+}

frontend/src/css/group-view.css

@@ -17,6 +17,7 @@
 }
 .group-member-list .user-item .group-member-name {
   margin: 0 5px;
+  max-width: 70%;
 }
 .group-member-list .user-item .group-member-admin {
   color: #888;

frontend/src/css/review-comments.css

@@ -50,6 +50,7 @@
   padding-left: 10px;
   height: 2rem;
   display: block;
+  max-width: 75%;
 }
 .seafile-comment-item .seafile-comment-info .reviewer-name {
   font-size: 1rem;

frontend/src/draft.js

@@ -898,7 +898,7 @@ class SidePanelReviewers extends React.Component {
             return (
               <div className="reviewer-info" key={index}>
                 <img className="avatar review-side-panel-avatar" src={item.avatar_url} alt=""/>
-                <span className="reviewer-name">{item.user_name}</span>
+                <span className="reviewer-name ellipsis">{item.user_name}</span>
               </div>
             );
           })
@@ -924,7 +924,7 @@ class SidePanelAuthor extends React.Component {
         <div className="review-side-panel-header">{gettext('Author')}</div>
         <div className="author-info">
           <img className="avatar review-side-panel-avatar" src={authorAvatar} alt=""/>
-          <span className="author-name">{author}</span>
+          <span className="author-name ellipsis">{author}</span>
         </div>
       </div>
     );

frontend/src/pages/groups/group-view.js

@@ -442,10 +442,10 @@ class GroupView extends React.Component {
                             this.state.groupMembers.map(function(item, index) {
                               return (
                                 <li key={index}>
-                                  <a href="#" className="sf-popover-item user-item">
+                                  <a href="#" className="sf-popover-item user-item d-flex">
                                     <img src={item.avatar_url} alt="" className="group-member-avatar avatar"/>
-                                    <span className="txt-item ellipsis">
+                                    <span className="txt-item ellipsis d-flex">
-                                      <span className="group-member-name">{item.name}</span>
+                                      <span className="group-member-name ellipsis">{item.name}</span>
                                       <span className="group-member-admin">{that.translateRole(item.role)}</span>
                                     </span>
                                   </a>