From f560e8c850e177b295509248dc49b09eb9bd5888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20Wilczy=C5=84ski?=
 <5626656+tomasz1986@users.noreply.github.com>
Date: Sun, 3 May 2020 02:34:28 +0900
Subject: [PATCH] gui: Prevent text overflow in file lists (fixes #6268)
 (#6292)

---
 gui/default/assets/css/overrides.css                         | 5 +++++
 gui/default/syncthing/device/globalChangesModalView.html     | 2 +-
 .../syncthing/transfer/localChangedFilesModalView.html       | 2 +-
 .../syncthing/transfer/remoteNeededFilesModalView.html       | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index 3f10295cd..2409dab22 100644
--- a/gui/default/assets/css/overrides.css
+++ b/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;
diff --git a/gui/default/syncthing/device/globalChangesModalView.html b/gui/default/syncthing/device/globalChangesModalView.html
index 168b2f8ed..531ee94b5 100644
--- a/gui/default/syncthing/device/globalChangesModalView.html
+++ b/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>
diff --git a/gui/default/syncthing/transfer/localChangedFilesModalView.html b/gui/default/syncthing/transfer/localChangedFilesModalView.html
index 858fcd06c..0a670f3ef 100644
--- a/gui/default/syncthing/transfer/localChangedFilesModalView.html
+++ b/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>
diff --git a/gui/default/syncthing/transfer/remoteNeededFilesModalView.html b/gui/default/syncthing/transfer/remoteNeededFilesModalView.html
index 2a489d3f5..0ad2a8b14 100644
--- a/gui/default/syncthing/transfer/remoteNeededFilesModalView.html
+++ b/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>