outsourced and refactored is-word-break class

scm-ui/src/repos/sources/components/FileTreeLeaf.js

@@ -12,12 +12,7 @@ const styles = {
   iconColumn: {
     width: "16px"
   },
-  wordBreakColumn: {
+  wordBreakMinWidth: {
-    WebkitHyphens: "auto",
-    MozHyphens: "auto",
-    MsHyphens: "auto",
-    hyphens: "auto",
-    wordBreak: "break-all",
     minWidth: "10em"
   }
 };
@@ -80,12 +75,12 @@ class FileTreeLeaf extends React.Component<Props> {
     return (
       <tr>
         <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
-        <td className={classes.wordBreakColumn}>{this.createFileName(file)}</td>
+        <td className={classNames(classes.wordBreakMinWidth, "is-word-break")}>{this.createFileName(file)}</td>
         <td className="is-hidden-mobile">{fileSize}</td>
         <td className="is-hidden-mobile">
           <DateFromNow date={file.lastModified} />
         </td>
-        <td className={classNames(classes.wordBreakColumn, "is-hidden-mobile")}>
+        <td className={classNames(classes.wordBreakMinWidth, "is-word-break", "is-hidden-mobile")}>
           {file.description}
         </td>
       </tr>

scm-ui/styles/scm.scss

@@ -27,6 +27,14 @@ $blue: #33B2E8;
   padding: 0 0 0 3.8em !important;
 }
 
+.is-word-break {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-break: break-all;
+}
+
 .main {
   min-height: calc(100vh - 260px);
 }