Merge branch 'fix-process-list-overflow' into 'master'

Prevent horizontal overflow on process list

Closes #1003

See merge request !1284

scss/main.scss

@@ -50,6 +50,15 @@ td.shrink {
   }
 }
 
+/*
+ * Add this to any element that displays user-defined names, for example a project or process name,
+ * to ensure that very long names cannot cause the element to overflow the page.
+ * This is most commonly needed in tables, on <td> cells.
+ */
+.is-word-break-all {
+  word-break: break-all;
+}
+
 kbd {
   display: inline-block;
   padding: .2em .5em;

vue/Process/Row.vue

@@ -18,8 +18,8 @@
         <i class="icon icon-help has-text-info"></i>
       </samp>
     </td>
-    <td>{{ process.name }}</td>
-    <td>{{ corpus.name || process.corpus }}</td>
+    <td class="is-word-break-all">{{ process.name }}</td>
+    <td class="is-word-break-all">{{ corpus.name || process.corpus }}</td>
     <td>{{ processMode }}</td>
     <td>
       <template v-if="process.finished">Finished</template>