gui: Prevent text overflow in file lists (fixes #6268) (#6292)

gui/default/assets/css/overrides.css

@@ -136,6 +136,11 @@ table.table-auto td {
     max-width: 0px;
 }
 
+/* Wrap long file paths to prevent text overflow. See issue #6268. */
+.file-path {
+    word-break: break-all;
+}
+
 .folder-advanced {
     padding: 1rem;
     margin-bottom: 15px;

gui/default/syncthing/device/globalChangesModalView.html

@@ -20,7 +20,7 @@
             <td>{{changeEvent.data.action}}</td>
             <td>{{changeEvent.data.type}}</td>
             <td class="no-overflow-ellipse">{{folderLabel(changeEvent.data.folder)}}</td>
-            <td class="no-overflow-ellipse">{{changeEvent.data.path}}</td>
+            <td class="file-path no-overflow-ellipse">{{changeEvent.data.path}}</td>
             <td class="no-overflow-ellipse">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
           </tr>
         </tbody>

gui/default/syncthing/transfer/localChangedFilesModalView.html

@@ -11,7 +11,7 @@
         </tr>
       </thead>
       <tr dir-paginate="file in localChanged.files | itemsPerPage: localChanged.perpage" current-page="localChanged.page" total-items="model[localChangedFolder].receiveOnlyTotalItems" pagination-id="localChanged">
-        <td>{{file.name}}</td>
+        <td class="file-path">{{file.name}}</td>
         <td><span ng-hide="file.type == 'DIRECTORY'">{{file.size | binary}}B</span></td>
       </tr>
     </table>

gui/default/syncthing/transfer/remoteNeededFilesModalView.html

@@ -22,7 +22,7 @@
                 </tr>
               </thead>
               <tr dir-paginate="file in remoteNeed[folder].files | itemsPerPage: remoteNeed[folder].perpage" current-page="remoteNeed[folder].page" total-items="completion[remoteNeedDevice.deviceID][folder].needItems" pagination-id="'remoteNeed-' + folder">
-                <td>{{file.name}}</td>
+                <td class="file-path">{{file.name}}</td>
                 <td><span ng-hide="file.type == 'DIRECTORY'">{{file.size | binary}}B</span></td>
                 <td>{{file.modified | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                 <td ng-if="file.modifiedBy">{{friendlyNameFromShort(file.modifiedBy)}}</td>