optimize code (#5831)

* optimize code

* optimize code

frontend/src/components/share-link-panel/index.css

@@ -1,67 +0,0 @@
-.sdoc-share-link-tab-table table,
-.sdoc-share-link-tab-table thead,
-.sdoc-share-link-tab-table tbody {
-  display: block;
-}
-
-.sdoc-share-link-tab-table thead,
-.sdoc-share-link-tab-table tbody tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.sdoc-share-link-tab-table thead {
-  width: calc(100% - 1em)
-}
-
-.sdoc-share-link-tab-table thead {
-  width: calc(100% - 1em)
-}
-
-.sdoc-share-link-tab-table table,
-.sdoc-share-link-tab-table thead,
-.sdoc-share-link-tab-table tbody {
-  display: block;
-}
-
-.sdoc-share-link-tab-table thead,
-.sdoc-share-link-tab-table tbody tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.sdoc-share-link-tab-table th:nth-child(1),
-.sdoc-share-link-tab-table td:nth-child(1) {
-  width: 5%;
-}
-
-.sdoc-share-link-tab-table th:nth-child(2),
-.sdoc-share-link-tab-table td:nth-child(2) {
-  width: 26%;
-}
-
-.sdoc-share-link-tab-table th:nth-child(3),
-.sdoc-share-link-tab-table td:nth-child(3) {
-  width: 30%;
-}
-
-.sdoc-share-link-tab-table th:nth-child(4),
-.sdoc-share-link-tab-table td:nth-child(4) {
-  width: 25%;
-}
-
-.sdoc-share-link-tab-table th:nth-child(5),
-.sdoc-share-link-tab-table td:nth-child(5) {
-  width: 14%;
-}
-
-.sdoc-share-link-tab-table thead {
-  width: calc(100% - 1em)
-}
-
-.sdoc-share-link-tab-table tbody {
-  height: 450px;
-  overflow: auto;
-}

frontend/src/components/share-link-panel/link-list.js

@@ -5,8 +5,6 @@ import EmptyTip from '../empty-tip';
 import LinkItem from './link-item';
 import CommonOperationConfirmationDialog from '../../components/dialog/common-operation-confirmation-dialog';
 
-import './index.css';
-
 const propTypes = {
   shareLinks: PropTypes.array.isRequired,
   permissionOptions: PropTypes.array.isRequired,
@@ -76,7 +74,8 @@ class LinkList extends React.Component {
             <p className="text-secondary">{gettext('No share links')}</p>
           </EmptyTip>
         ) : (
-          <table className="table-hover sdoc-share-link-tab-table">
+          <div className='share-list-container share-link'>
+            <table className="table-place-header">
               <thead>
                 <tr>
                   <th width="5%" className="text-center">
@@ -88,6 +87,18 @@ class LinkList extends React.Component {
                   <th width="14%"></th>
                 </tr>
               </thead>
+            </table>
+            <div className='table-real-container'>
+              <table className="table-real-content table-thead-hidden">
+                <thead>
+                  <tr>
+                    <th width="5%" className="text-center"></th>
+                    <th width="26%">{gettext('Link')}</th>
+                    <th width="30%">{gettext('Permission')}</th>
+                    <th width="25%">{gettext('Expiration')}</th>
+                    <th width="14%"></th>
+                  </tr>
+                </thead>
                 <tbody>
                   {shareLinks.map((item, index) => {
                     return (
@@ -103,6 +114,8 @@ class LinkList extends React.Component {
                   })}
                 </tbody>
               </table>
+            </div>
+          </div>
         )}
         {this.state.isDeleteShareLinksDialogOpen && (
           <CommonOperationConfirmationDialog

frontend/src/css/share-link-dialog.css

@@ -50,12 +50,22 @@
 
 .share-dialog-content .share-dialog-main .tab-pane {
     height: 100%;
-    overflow: auto;
 }
 
 .share-list-container {
-    max-height: 18rem;
+    max-height: 20rem;
     min-height: 10rem;
+    overflow: auto;
+}
+
+#share-link-panel .share-list-container {
+    max-height: 23rem;
+    overflow: hidden;
+}
+
+#share-link-panel .table-real-container {
+    height: 23rem;
+    overflow: auto;
 }
 
 .share-dialog-content label {