diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index 6983b83013..a616c17f65 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -1,14 +1,14 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, isPro } from '../../utils/constants';
 import { Button } from 'reactstrap';
+import { gettext, isPro } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
-import '../../css/invitations.css';
 
+import '../../css/invitations.css';
 import '../../css/share-to-user.css';
 
 class UserItem extends React.Component {
@@ -38,13 +38,11 @@ class UserItem extends React.Component {
   };
 
   deleteShareItem = () => {
-    let item = this.props.item;
-    this.props.deleteShareItem(item.user_info.name);
+    this.props.deleteShareItem(this.props.item.user_info.name);
   };
 
   onChangeUserPermission = (permission) => {
-    let item = this.props.item;
-    this.props.onChangeUserPermission(item, permission);
+    this.props.onChangeUserPermission(this.props.item, permission);
   };
 
   render() {
@@ -54,7 +52,7 @@ class UserItem extends React.Component {
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
         <td className="name">
-          <div className="position-relative">
+          <div className="position-relative d-flex align-items-center">
             <img
               src={item.user_info.avatar_url}
               width="24"
@@ -67,9 +65,12 @@ class UserItem extends React.Component {
             {isUserDetailsPopoverOpen && (
               <div className="user-details-popover p-4 position-absolute w-100 mt-1">
                 <div className="user-details-main pb-3">
-                  <img src={item.user_info.avatar_url} width="40"
+                  <img
+                    src={item.user_info.avatar_url}
+                    width="40"
                     alt={item.user_info.nickname}
-                    className="rounded-circle mr-2" />
+                    className="rounded-circle mr-2"
+                  />
                   <span className="user-details-name">{item.user_info.nickname}</span>
                 </div>
                 <dl className="m-0 mt-3 d-flex">
diff --git a/frontend/src/css/share-link-dialog.css b/frontend/src/css/share-link-dialog.css
index e3720b7911..05fd86ec8b 100644
--- a/frontend/src/css/share-link-dialog.css
+++ b/frontend/src/css/share-link-dialog.css
@@ -1,71 +1,67 @@
 .share-dialog .share-dialog-content {
-    padding: 0;
-    min-height: 27rem;
-    display: flex;
-    flex-direction: column;
+  padding: 0;
+  min-height: 27rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.share-dialog-content .share-dialog-side {
+  flex-basis: 22%;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+}
+
+.share-dialog .nav .nav-item .nav-link {
+  padding: 0.3125rem 0.25rem;
 }
 
 @media (min-width: 768px) {
   .share-dialog .share-dialog-content {
     flex-direction: row;
   }
-}
-
-.share-dialog-content .share-dialog-side {
-    /*display: flex;*/
-    flex-basis: 22%;
-    padding: 1rem;
-    border-bottom: 1px solid #eee;
-}
-
-.share-dialog .nav .nav-item .nav-link {
-    padding: 0.3125rem 0.25rem;
-}
-
-@media (min-width: 768px) {
   .share-dialog-content .share-dialog-side {
     padding: 12px 8px;
     border: 0;
     border-right: 1px solid #eee;
   }
-   .share-dialog-side .nav {
-     flex-direction: column;
-   }
-   .share-dialog-side .nav-pills .nav-item .nav-link {
-     width: 100%;
-     padding: 0.3125rem 0.5rem;
-     margin: 0;
-   }
+  .share-dialog-side .nav {
+    flex-direction: column;
+  }
+  .share-dialog-side .nav-pills .nav-item .nav-link {
+    width: 100%;
+    padding: 0.3125rem 0.5rem;
+    margin: 0;
+  }
 }
 
 .share-dialog-content .share-dialog-main {
-    display: flex;
-    flex-basis: 78%;
-    padding: 1rem;
+  display: flex;
+  flex-basis: 78%;
+  padding: 1rem;
 }
 
 .share-dialog-content .share-dialog-main .tab-content {
-    flex: 1;
+  flex: 1;
 }
 
 .share-dialog-content .share-dialog-main .tab-pane {
-    height: 100%;
+  height: 100%;
 }
 
 .share-list-container {
-    max-height: 20rem;
-    min-height: 10rem;
-    overflow: auto;
+  max-height: 20rem;
+  min-height: 15rem;
+  overflow: auto;
 }
 
 .share-list-container.share-link-list {
-    max-height: 23rem;
-    overflow: hidden;
+  max-height: 23rem;
+  overflow: hidden;
 }
 
 #share-link-panel .table-real-container {
-    height: 20rem;
-    overflow: auto;
+  height: 20rem;
+  overflow: auto;
 }
 
 #share-link-panel .link-authenticated-op:hover {
@@ -75,52 +71,52 @@
 }
 
 .share-dialog-content label {
-    padding: 0.5rem 0 0.25rem;
+  padding: 0.5rem 0 0.25rem;
 }
 
 .share-dialog-content label.form-check-label {
-    padding: 0.25rem 0;
+  padding: 0.25rem 0;
 }
 
 .link-operation-content {
-    margin-left: 1.25rem;
+  margin-left: 1.25rem;
 }
 
 .link-operation-icon {
-    color: #9aa0ac;
+  color: #9aa0ac;
 }
 
 .tip {
-    color: #808080;
-    margin-bottom: 1rem;
+  color: #808080;
+  margin-bottom: 1rem;
 }
 
 .generate-share-link .passwd,
 .generate-upload-link .passwd {
-    width: 60%;
+  width: 60%;
 }
 
 .generate-share-link .permission {
-    margin-left: 2.5rem;
+  margin-left: 2.5rem;
 }
 
 .generate-link-btn {
-    margin-top: 1.125rem;
+  margin-top: 1.125rem;
 }
 
 input.expire-input {
-    display: inline-block;
-    width: 4rem;
-    height: 1.5rem;
-    padding: 0.25rem 0.25rem;
-    margin: 0 0.25rem 0 1.25rem;
+  display: inline-block;
+  width: 4rem;
+  height: 1.5rem;
+  padding: 0.25rem 0.25rem;
+  margin: 0 0.25rem 0 1.25rem;
 }
 
 .expire-input-border {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    height: 2.375rem!important;
-    padding: 0.375rem 0.75rem!important;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  height: 2.375rem!important;
+  padding: 0.375rem 0.75rem!important;
 }
 
 .share-dialog-main .permission-editor .permission-editor__menu {
@@ -128,54 +124,55 @@ input.expire-input {
 }
 
 .expir-span {
-    border: 1px solid rgba(0, 40, 100, 0.12);
-    border-left: none;
-    font-size: 0.9375rem;
-    margin-left: -5px;
-    padding: 0px 8px;
-    height: 2.375rem;
-    display: inline-block;
-    text-align: center;
-    position: absolute;
-    top: 4px;
-    min-width: 2.375rem;
-    line-height: 2.25;
-    border-bottom-right-radius: 3px;
-    border-top-right-radius: 3px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-left: none;
+  font-size: 0.9375rem;
+  margin-left: -5px;
+  padding: 0px 8px;
+  height: 2.375rem;
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  top: 4px;
+  min-width: 2.375rem;
+  line-height: 2.25;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
 }
 
 .custom-permission .permission-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: .375rem 0;
-    border-bottom: 1px solid #efefef;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: .375rem 0;
+  border-bottom: 1px solid #efefef;
 }
 
 .custom-permission .permission-header .back-icon {
-    color: #999;
-    margin-right: 10px;
-    cursor: pointer;
+  color: #999;
+  margin-right: 10px;
+  cursor: pointer;
 }
 
 .custom-permission .permission-name-desc {
-    margin-top: .375rem;
+  margin-top: .375rem;
 }
+
 .custom-permission .permission-name-desc label {
-    font-size: 14px;
-    color: #999;
+  font-size: 14px;
+  color: #999;
 }
 
 .custom-permission .permission-name-desc .permission-name,
 .custom-permission .permission-name-desc .permission-desc {
-    flex: 1;
+  flex: 1;
 }
 
 .custom-permission .permission-name-desc .permission-desc {
-    margin-left: .4rem;
+  margin-left: .4rem;
 }
 
 .custom-permission .permissions-list-body {
-    max-height: 350px;
-    overflow-y: scroll;
+  max-height: 350px;
+  overflow-y: scroll;
 }
diff --git a/frontend/src/css/share-to-user.css b/frontend/src/css/share-to-user.css
index f9cd69585a..f6f8c77b78 100644
--- a/frontend/src/css/share-to-user.css
+++ b/frontend/src/css/share-to-user.css
@@ -5,10 +5,13 @@
   background: #fff;
   z-index: 1000;
   left: 2px;
+  top: 24px;
 }
+
 .user-details-main {
   border-bottom: 1px solid #eee;
 }
+
 .user-details-name {
   font-size: 1rem;
   font-weight: 500;