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 dea0aaad34..698a74057b 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -134,7 +134,7 @@ class DirColumnView extends React.Component {
     return '';
   }
 
-  componentDidMount() {
+  componentWillMount() {
     let rate = this.getCookie('navRate');
     if (rate) {
       this.setState({
@@ -148,7 +148,7 @@ class DirColumnView extends React.Component {
     const select = this.state.inResizing ? 'none' : '';
     const mainFlex = '1 0 ' + (1 - this.state.navRate) * 100 + '%';
     return (
-      <div className="d-flex" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
+      <div className="dir-colunm-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
         <DirColumnNav 
           currentPath={this.props.path}
           repoPermission={this.props.repoPermission}
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 4808dc8d49..17c5d657d5 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -7,6 +7,11 @@
   min-height: 0;
 }
 
+.dir-colunm-view {
+  display: flex;
+  width: 100%;
+}
+
 .dir-content-nav {
   flex: 0 0 25%;
   display: flex;