gui: fix path breaking out of global changes modal (fixes #3895)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/4146

gui/default/assets/css/overrides.css

@@ -266,6 +266,21 @@ ul.three-columns li, ul.two-columns li {
     z-index: 980;
 }
 
+.globalChanges-path-col {
+  /* These are technically the same, but use both */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+}
+.globalChanges-time-col {
+    width: 100px;
+}
+
 /** Footer nav on small devices **/
 @media (max-width: 1199px) {
     /* Stay at the end of the page, with space reserved for the footer

gui/default/syncthing/device/globalChangesModalView.html

@@ -14,8 +14,8 @@
             <td ng-if="!changeEvent.data.modifiedBy"><span translate>Unknown</span></td>
             <td>{{changeEvent.data.action}}</td>
             <td>{{changeEvent.data.type}}</td>
-            <td>{{changeEvent.data.path}}</td>
-            <td>{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
+            <td class="globalChanges-path-col">{{changeEvent.data.path}}</td>
+            <td class="globalChanges-time-col">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
           </tr>
         </table>
     </div>