change file path max-height (#3814)

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

@@ -43,10 +43,10 @@ class DirPath extends React.Component {
       } else {
         nodePath += '/' + item;
         return (
-          <span key={index} >
+          <Fragment key={index} >
             <span className="path-split">/</span>
             <a className="path-link" data-path={nodePath} onClick={this.onPathClick}>{item}</a>
-          </span>
+          </Fragment>
         );
       }
     });

frontend/src/css/layout.css

@@ -286,3 +286,20 @@ img[src=""],img:not([src]){ /* for first loading img*/
   color: #999;
 }
 
+.path-container {
+  display: flex;
+  word-break: keep-all;
+  width: 90%;
+}
+.path-container a {
+  max-height: 50px;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+} 
+.path-container span, .path-container a {
+  flex-shrink: 1;
+} 
+.path-container span:first-child, .path-container span:last-child {
+  flex-shrink: 0;
+} 

frontend/src/pages/wiki/main-panel.js

@@ -57,7 +57,7 @@ class MainPanel extends Component {
       } else {
         nodePath += '/' + item;
         return (
-          <span key={index} >
+          <Fragment key={index} >
             <span className="path-split">/</span>
             <a 
               className="path-link" 
@@ -65,7 +65,7 @@ class MainPanel extends Component {
               onClick={this.onMainNavBarClick}>
               {item}
             </a>
-          </span>
+          </Fragment>
         );
       }
     });
@@ -116,7 +116,7 @@ class MainPanel extends Component {
         </div>
         <div className="main-panel-center">
           <div className="cur-view-path">
-            <div className="path-containter">
+            <div className="path-container">
               <a href={siteRoot + 'published/' + slug} className="normal">{slug}</a>
               {this.renderNavPath()}
             </div>