From ad5abb6054e6802a28d316c2b3b7ae34af736916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 19 Nov 2022 20:53:27 +0100
Subject: [PATCH] css fix long file names.

---
 client/src/components/files.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/files.vue b/client/src/components/files.vue
index 58d4ddf..f4af0f8 100644
--- a/client/src/components/files.vue
+++ b/client/src/components/files.vue
@@ -7,7 +7,7 @@
     <div class="files-list">
       <div v-for="item in files" :key="item.name" class="files-list-item">
         <i :class="fileIcon(item)" />
-        <p>{{ item.name }}</p>
+        <p class="file-name" :title="item.name">{{ item.name }}</p>
         <p class="file-size">{{ fileSize(item.size) }}</p>
         <i v-if="item.type !== 'dir'" class="fas fa-download download" @click="download(item)" />
       </div>
@@ -29,7 +29,7 @@
                 'fa-warning': download.status === 'failed',
               }"
             ></i>
-            <p>{{ download.name }}</p>
+            <p class="file-name" :title="download.name">{{ download.name }}</p>
             <p class="file-size">{{ Math.min(100, Math.round((download.progress / download.size) * 100)) }}%</p>
             <i class="fas fa-xmark remove-transfer" @click="removeTransfer(download)"></i>
           </div>
@@ -58,7 +58,7 @@
                 'fa-warning': upload.status === 'failed',
               }"
             ></i>
-            <p>{{ upload.name }}</p>
+            <p class="file-name" :title="upload.name">{{ upload.name }}</p>
             <p class="file-size">{{ Math.min(100, Math.round((upload.progress / upload.size) * 100)) }}%</p>
             <i class="fas fa-xmark remove-transfer" @click="removeTransfer(upload)"></i>
           </div>
@@ -164,10 +164,17 @@
       margin-left: auto;
     }
 
+    .file-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
     .file-size {
       margin-left: auto;
       margin-right: 0.5em;
       color: rgba($color: #fff, $alpha: 0.4);
+      white-space: nowrap;
     }
 
     .refresh:hover,