diff --git a/frontend/src/components/dir-view-mode/dir-column-file.css b/frontend/src/components/dir-view-mode/dir-column-file.css
new file mode 100644
index 0000000000..138636ed7b
--- /dev/null
+++ b/frontend/src/components/dir-view-mode/dir-column-file.css
@@ -0,0 +1,15 @@
+.dir-column-file {
+  padding-right: 10px;
+  padding-left: 10px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dir-column-file .dir-column-file-top {
+  width: 100%;
+  height: 10px;
+  z-index: 7;
+  transform: translateZ(1000px);
+  position: relative;
+  background: #ffffff;
+}
diff --git a/frontend/src/components/dir-view-mode/dir-column-file.js b/frontend/src/components/dir-view-mode/dir-column-file.js
index 0da4555b42..fecd36b01a 100644
--- a/frontend/src/components/dir-view-mode/dir-column-file.js
+++ b/frontend/src/components/dir-view-mode/dir-column-file.js
@@ -5,6 +5,8 @@ import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, lang, mediaUrl } from '../../utils/constants';
 import SeafileMarkdownViewer from '../seafile-markdown-viewer';
 
+import './dir-column-file.css';
+
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
@@ -59,8 +61,8 @@ class DirColumnFile extends React.Component {
       };
 
       return (
-        <div className="w-100 h-100 o-hidden d-flex" style={{ paddingRight: 10, paddingLeft: 10, flexDirection: 'column', alignItems: 'center' }}>
-          <div className="" style={{ width: '100%', height: 10, zIndex: 7, transform: 'translateZ(1000px)', position: 'relative', background: '#fff' }}></div>
+        <div className="dir-column-file w-100 h-100 o-hidden d-flex">
+          <div className="dir-column-file-top"></div>
           <SeafileMetadata repoID={this.props.repoID} currentRepoInfo={this.props.currentRepoInfo} />
         </div>
       );
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js
index 83a28b6948..b584a52c26 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -279,7 +279,6 @@ class DirColumnNav extends React.Component {
         />
         <DirOthers
           repoID={this.props.repoID}
-          currentPath={this.props.currentPath}
           userPerm={this.props.userPerm}
         />
       </>
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
index 84249d2286..caf2e504b7 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -86,6 +86,7 @@ class DirColumnView extends React.Component {
     this.containerWidth = null;
     this.resizeRef = null;
     this.dragHandler = null;
+    this.viewModeContainer = React.createRef();
   }
 
   onResizeMouseUp = () => {
@@ -98,7 +99,7 @@ class DirColumnView extends React.Component {
   };
 
   onResizeMouseDown = () => {
-    this.containerWidth = this.refs.viewModeContainer.clientWidth;
+    this.containerWidth = this.viewModeContainer.current.clientWidth;
     this.setState({
       inResizing: true
     });
@@ -172,7 +173,7 @@ class DirColumnView extends React.Component {
     const select = inResizing ? 'none' : '';
     const mainFlex = '1 0 ' + (1 - navRate) * 100 + '%';
     return (
-      <div className="dir-column-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
+      <div className="dir-column-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref={this.viewModeContainer}>
         {isTreePanelShown && (
           <>
             <DirColumnNav
diff --git a/frontend/src/components/dir-view-mode/dir-others.js b/frontend/src/components/dir-view-mode/dir-others.js
index 58417ca910..31d3210b51 100644
--- a/frontend/src/components/dir-view-mode/dir-others.js
+++ b/frontend/src/components/dir-view-mode/dir-others.js
@@ -1,19 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext, siteRoot } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
 import TreeSection from '../tree-section';
 
-const DirOthers = ({ userPerm, repoID, currentPath }) => {
+const DirOthers = ({ userPerm, repoID }) => {
 
   let trashUrl = null;
   const historyUrl = siteRoot + 'repo/history/' + repoID + '/';
-  if (userPerm === 'rw' && !Utils.isMarkdownFile(currentPath)) {
-    if (Utils.getFileName(currentPath)) {
-      trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
-    } else {
-      trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
-    }
+  if (userPerm === 'rw') {
+    trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
   }
 
   return (
@@ -43,7 +38,6 @@ const DirOthers = ({ userPerm, repoID, currentPath }) => {
 DirOthers.propTypes = {
   userPerm: PropTypes.string,
   repoID: PropTypes.string,
-  currentPath: PropTypes.string,
 };
 
 export default DirOthers;