update file path style (#3896)

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

@@ -38,7 +38,10 @@ class DirPath extends React.Component {
       }
       if (index === (pathList.length - 1)) {
         return (
-          <span key={index}><span className="path-split">/</span>{item}</span>
+          <Fragment key={index}>
+            <span className="path-split">/</span>
+            <span className="path-file-name">{item}</span>
+          </Fragment>
         );
       } else {
         nodePath += '/' + item;
@@ -87,7 +90,7 @@ class DirPath extends React.Component {
           </Fragment>
         )}
         {(currentPath === '/' || currentPath === '') ?
-          <span>{repoName}</span>:
+          <span className="path-repo-name">{repoName}</span>:
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
         }
         {pathElem}

frontend/src/css/layout.css

@@ -292,10 +292,10 @@ img[src=""],img:not([src]){ /* for first loading img*/
   word-break: keep-all;
   max-width: 80%;
 }
-.path-container a {
+.path-container a, .path-container span {
   max-height: 50px;
   overflow: hidden;
-  text-overflow:ellipsis;
+  text-overflow: ellipsis;
   white-space: nowrap;
 } 
 .path-container span, .path-container a {
@@ -304,3 +304,6 @@ img[src=""],img:not([src]){ /* for first loading img*/
 .path-container span:first-child, .path-container span:last-child {
   flex-shrink: 0;
 } 
+.path-container span.path-file-name, .path-container span.path-repo-name {
+  flex-shrink: 1;
+}

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

@@ -52,7 +52,10 @@ class MainPanel extends Component {
       } 
       if (index === (paths.length - 1)) {
         return (
-          <span key={index}><span className="path-split">/</span>{item}</span>
+          <Fragment key={index}>
+            <span className="path-split">/</span>
+            <span className="path-file-name">{item}</span>
+          </Fragment>
         );
       } else {
         nodePath += '/' + item;