gui: Show full failed item path

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

gui/default/assets/css/overrides.css

@@ -103,6 +103,12 @@ ul+h5 {
 table.table-condensed {
     table-layout: fixed;
 }
+
+table.table-dynamic {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
 table.table-condensed td {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -333,4 +339,4 @@ ul.three-columns li, ul.two-columns li {
     .navbar-fixed-bottom li {
          width: 100%;
     }
-}
+}

gui/default/syncthing/core/syncthingController.js

@@ -1625,6 +1625,7 @@ angular.module('syncthing.core')
 
         $scope.showFailed = function (folder) {
             $scope.failedCurrent = $scope.failed[folder];
+            $scope.failedFolderPath = $scope.folders[folder].path;
             $('#failed').modal().on('hidden.bs.modal', function () {
                 $scope.failedCurrent = undefined;
             });

gui/default/syncthing/transfer/failedFilesModalView.html

@@ -4,9 +4,9 @@
       <span translate>The following items could not be synchronized.</span>
       <span translate>They are retried automatically and will be synced when the error is resolved.</span>
     </p>
-    <table class="table table-striped table-condensed">
+    <table class="table table-striped table-dynamic">
       <tr dir-paginate="e in failedCurrent | itemsPerPage: failedPageSize" current-page="failedCurrentPage" pagination-id="failed">
-        <td><abbr tooltip data-original-title="{{e.path}}">{{e.path | basename}}</abbr></td>
+        <td>{{failedFolderPath}}{{e.path}}</td>
         <td><abbr tooltip data-original-title="{{e.error}}">{{e.error | lastErrorComponent}}</abbr></td>
       </tr>
     </table>