repair ui error

frontend/src/components/cur-dir-path/dir-path.js

@@ -51,7 +51,7 @@ class DirPath extends React.Component {
     let { currentPath, repoName } = this.props;
     let pathElem = this.turnPathToLink(currentPath);
     return (
-      <div className="path-containter">
+      <div className="path-container">
         {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
           return (
             <Fragment key={index}>

frontend/src/components/toolbar/repo-view-toobar.js

@@ -51,7 +51,7 @@ class RepoViewToolbar extends React.Component {
                   {gettext('More')}
                 </DropdownToggle>
                 <DropdownMenu>
-                  <DropdownItem>
+                  <DropdownItem className="link-dropdown-container">
                     <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
                   </DropdownItem>
                 </DropdownMenu>

frontend/src/css/groups.css

@@ -1,4 +1,21 @@
-.cur-view-content-groups thead th { /* overwrite bootstrap styles */
+.cur-view-content-groups .department-group-icon {
+  margin-left: 0.25rem;
+  color:#888;
+}
+
+.cur-view-content-groups .group-list-panel {
+  padding-bottom: 1rem;
+}
+
+.group-list-panel .group-item-heading {
+  font-size: 1rem;
+  font-weight: normal;
+  padding: 0.25rem; 
+  border-bottom: 1px solid #e6e6e6;
+  margin: 0.75rem 0 0; 
+}
+
+.group-list-panel thead th { /* overwrite bootstrap styles */
   padding: 0;
   font-size: 0;
   border: 0;
@@ -8,28 +25,10 @@
   border-top:0;
 }
 
-.group-item-heading {
-  font-size: 16px;
-  font-weight: normal;
-  padding: 3px; 
-  border-bottom: 1px solid #e6e6e6;
-  margin: 12px 0 0; 
-}
-.group-item-empty-tip {
+
+.group-list-panel .group-item-empty-tip {
   color: #a4a4a4;
   text-align: center;
   padding: 4px 0;
   border-bottom: 1px solid #e5e5e5;
-  margin: 0 0 32px;
-}
-
-.group-top-op-icon {
-    display: inline-block;
-    font-size: 22px;
-    margin: 3px 0 0 10px;
-}
-
-.department-group-icon {
-  margin-left: 0.25rem;
-  color:#888;
 }

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

@@ -48,7 +48,7 @@ class RepoListViewPanel extends React.Component {
     let group = this.props.group;
     const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
     return (
-      <Fragment>
+      <div className="group-list-panel">
         <h4 className="group-item-heading ellipsis">
           <a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>
         </h4>
@@ -62,7 +62,7 @@ class RepoListViewPanel extends React.Component {
             onItemUnshare={this.onItemUnshare}
           />
         }
-      </Fragment>
+      </div>
     );
   }
  }

media/css/seahub_react.css

@@ -167,7 +167,14 @@ ul,ol,li {
     overflow: auto;
 }
 
+.link-dropdown-container {
+    padding: 0;
+    text-align: center;
+}
+
 .link-dropdown-item {
+    display: block;
+    padding: 0.25rem 1.5rem;
     color: #6e7687;
 }
 
@@ -762,7 +769,7 @@ a.op-icon:focus {
 }
 
 /* begin path navigation */
-.path-containter { /* for the real path */
+.path-container { /* for the real path */
     font-size: 1rem;
     word-break: break-all;
 }