Merged in bug/table_navi_overflow (pull request #132)

Bug/table navi overflow

scm-ui/src/repos/containers/RepositoryRoot.js

@@ -114,7 +114,7 @@ class RepositoryRoot extends React.Component<Props> {
     return (
       <Page title={repository.namespace + "/" + repository.name}>
         <div className="columns">
-          <div className="column is-three-quarters">
+          <div className="column is-three-quarters is-clipped">
             <Switch>
               <Route
                 path={url}

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

@@ -119,7 +119,9 @@ class FileTree extends React.Component<Props> {
             <th className="is-hidden-mobile">
               {t("sources.file-tree.lastModified")}
             </th>
-            <th>{t("sources.file-tree.description")}</th>
+            <th className="is-hidden-mobile">
+              {t("sources.file-tree.description")}
+            </th>
           </tr>
         </thead>
         <tbody>

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

@@ -6,10 +6,19 @@ import FileSize from "./FileSize";
 import FileIcon from "./FileIcon";
 import { Link } from "react-router-dom";
 import type { File } from "@scm-manager/ui-types";
+import classNames from "classnames";
 
 const styles = {
   iconColumn: {
     width: "16px"
+  },
+  wordBreakColumn: {
+    WebkitHyphens: "auto",
+    MozHyphens: "auto",
+    MsHyphens: "auto",
+    hyphens: "auto",
+    wordBreak: "break-all",
+    minWidth: "10em"
   }
 };
 
@@ -71,12 +80,14 @@ class FileTreeLeaf extends React.Component<Props> {
     return (
       <tr>
         <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
-        <td>{this.createFileName(file)}</td>
+        <td className={classes.wordBreakColumn}>{this.createFileName(file)}</td>
         <td className="is-hidden-mobile">{fileSize}</td>
         <td className="is-hidden-mobile">
           <DateFromNow date={file.lastModified} />
         </td>
-        <td>{file.description}</td>
+        <td className={classNames(classes.wordBreakColumn, "is-hidden-mobile")}>
+          {file.description}
+        </td>
       </tr>
     );
   }