gui: Add folder label to global changes, use bootstrap table (fixes #4828) (#4838)

gui/default/assets/css/overrides.css

@@ -271,21 +271,6 @@ 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

@@ -1,12 +1,14 @@
 <style> th, td { padding: 6px; } </style>
 <modal id="globalChanges" status="default" icon="{{'info-circle'}}" heading="{{'Recent Changes' | translate}}" large="yes" closeable="yes">
     <div class="modal-body">
-        <table>
+      <div class="table-responsive">
+        <table class="table-condensed table-striped table" style="table-layout: auto;">
           <thead>
             <tr>
               <th translate>Device</th>
               <th translate>Action</th>
               <th translate>Type</th>
+              <th translate>Folder</th>
               <th translate>Path</th>
               <th translate>Time</th>
             </tr>
@@ -17,12 +19,14 @@
               <td ng-if="!changeEvent.data.modifiedBy"><span translate>Unknown</span></td>
               <td>{{changeEvent.data.action}}</td>
               <td>{{changeEvent.data.type}}</td>
-              <td class="globalChanges-path-col">{{changeEvent.data.path}}</td>
+              <td class="no-overflow-ellipse">{{changeEvent.data.label}}</td>
-              <td class="globalChanges-time-col">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
+              <td class="no-overflow-ellipse">{{changeEvent.data.path}}</td>
+              <td class="no-overflow-ellipse">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
             </tr>
           </tbody>
         </table>
       </div>
+    </div>
     <div class="modal-footer">
         <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
         <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>