diff --git a/frontend/src/components/dirent-detail/detail-comments-list.js b/frontend/src/components/dirent-detail/detail-comments-list.js
index 0b8e2a9b61..0d4ab2ab98 100644
--- a/frontend/src/components/dirent-detail/detail-comments-list.js
+++ b/frontend/src/components/dirent-detail/detail-comments-list.js
@@ -138,27 +138,32 @@ class DetailCommentList extends React.Component {
 
   render() {
     const { repoID, filePath, fileParticipantList } = this.props;
+    const { commentsList } = this.state;
     return (
-      <div className="seafile-comment detail-comments h-100 w-100">
-        <ul className="seafile-comment-list">
-          {this.state.commentsList.length > 0 &&
-            this.state.commentsList.map((item, index = 0, arr) => {
-              let oldTime = (new Date(item.created_at)).getTime();
-              let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
-              return (
-                <React.Fragment key={item.id}>
+      <div className="seafile-comment detail-comments h-100">
+        <div className="flex-fill o-auto">
+          {commentsList.length > 0 ? (
+            <ul className="seafile-comment-list">
+              {commentsList.map((item, index = 0, arr) => {
+                let oldTime = (new Date(item.created_at)).getTime();
+                let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+                return (
                   <CommentItem
-                    item={item} time={time} deleteComment={this.deleteComment}
-                    resolveComment={this.resolveComment} editComment={this.editComment}
+                    key={item.id}
+                    item={item}
+                    time={time}
+                    deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment}
+                    editComment={this.editComment}
                   />
-                </React.Fragment>
-              );
-            })
+                );
+              })
+              }
+            </ul>) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
           }
-          {(this.state.commentsList.length == 0 ) &&
-            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
-        </ul>
-        <div className="seafile-comment-footer">
+        </div>
+        <div className="seafile-comment-footer flex-shrink-0">
           {fileParticipantList &&
             <ParticipantsList
               onParticipantsChange={this.props.onParticipantsChange}
@@ -184,7 +189,9 @@ class DetailCommentList extends React.Component {
               appendSpaceOnAdd={true}
             />
           </MentionsInput>
-          <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
+          <div className="comment-submit-container">
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
+          </div>
         </div>
       </div>
     );
diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index e077a78358..bc20bbb37c 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -214,7 +214,7 @@ class DirentDetail extends React.Component {
         <div className="detail-container">
           {this.renderHeader(smallIconUrl, direntName)}
           <Nav tabs className="mx-0">{this.renderNavItem('info')}{this.renderNavItem('comments')}</Nav>
-          <TabContent activeTab={this.state.activeTab}>
+          <TabContent activeTab={this.state.activeTab} className="flex-fill o-auto">
             <TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
             <TabPane tabId="comments" className="comments h-100">
               <DetailCommentList
diff --git a/frontend/src/components/file-view/comment-panel.js b/frontend/src/components/file-view/comment-panel.js
index 6629773580..042172b302 100644
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/frontend/src/components/file-view/comment-panel.js
@@ -175,15 +175,14 @@ class CommentPanel extends React.Component {
                 let oldTime = (new Date(item.created_at)).getTime();
                 let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
                 return (
-                  <React.Fragment key={item.id}>
-                    <CommentItem
-                      item={item} time={time}
-                      deleteComment={this.deleteComment}
-                      resolveComment={this.resolveComment}
-                      editComment={this.editComment}
-                      showResolvedComment={this.state.showResolvedComment}
-                    />
-                  </React.Fragment>
+                  <CommentItem
+                    key={item.id}
+                    item={item} time={time}
+                    deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment}
+                    editComment={this.editComment}
+                    showResolvedComment={this.state.showResolvedComment}
+                  />
                 );
               })}
             </ul>) :
@@ -217,8 +216,7 @@ class CommentPanel extends React.Component {
             />
           </MentionsInput>
           <div className="comment-submit-container">
-            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
-              {gettext('Submit')}</Button>
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/css/comments-list.css b/frontend/src/css/comments-list.css
index 8aac8e7fc9..7bdbe3e6c7 100644
--- a/frontend/src/css/comments-list.css
+++ b/frontend/src/css/comments-list.css
@@ -3,7 +3,6 @@
   border-left: 1px solid #e6e6dd;
   display: flex;
   flex-direction: column;
-  width: 29%;
 }
 .seafile-comment-title,
 .seafile-history-title {
@@ -28,9 +27,6 @@
 .seafile-history-title .seafile-history-title-close:hover {
   color: #888;
 }
-.seafile-comment-list {
-  overflow-y: auto;
-}
 .seafile-comment-item {
   padding: 15px 10px;
   margin-bottom: 0;
@@ -133,9 +129,6 @@
 .detail-comments {
   border-left: 0;
 }
-.detail-comments .seafile-comment-list {
-  margin-top: 0;
-}
 .detail-comments .seafile-comment-footer {
   min-height: 175px;
 }
diff --git a/frontend/src/css/dirent-detail.css b/frontend/src/css/dirent-detail.css
index 3fdcf12258..ef9b6de440 100644
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -171,11 +171,6 @@
   margin-bottom: 0.5rem;
 }
 
-.detail-container .tab-content {
-  height: calc(100% - 73px);
-  overflow-y: auto;
-}
-
 .detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i {
   margin: 0 auto;
 }