added wordBreak class in scm.scss

scm-ui/src/repos/sources/containers/Content.js

@@ -41,13 +41,6 @@ const styles = {
   isVerticalCenter: {
     display: "flex",
     alignItems: "center"
-  },
-  wordBreak: {
-    WebkitHyphens: "auto",
-    MozHyphens: "auto",
-    MsHyphens: "auto",
-    hypens: "auto",
-    wordBreak: "break-all",
   }
 };
 
@@ -100,7 +93,7 @@ class Content extends React.Component<Props, State> {
                 classes.marginInHeader
               )}
             />
-            <span className={classes.wordBreak}>{file.name}</span>
+            <span className="is-word-break">{file.name}</span>
           </div>
           <div className="media-right">{selector}</div>
         </article>
@@ -132,11 +125,11 @@ class Content extends React.Component<Props, State> {
             <tbody>
               <tr>
                 <td>{t("sources.content.path")}</td>
-                <td className={classes.wordBreak}>{file.path}</td>
+                <td className="is-word-break">{file.path}</td>
               </tr>
               <tr>
                 <td>{t("sources.content.branch")}</td>
-                <td className={classes.wordBreak}>{revision}</td>
+                <td className="is-word-break">{revision}</td>
               </tr>
               <tr>
                 <td>{t("sources.content.size")}</td>
@@ -148,7 +141,7 @@ class Content extends React.Component<Props, State> {
               </tr>
               <tr>
                 <td>{t("sources.content.description")}</td>
-                <td className={classes.wordBreak}>{description}</td>
+                <td className="is-word-break">{description}</td>
               </tr>
             </tbody>
           </table>