fixes #539

app/templates/file.js

@@ -18,8 +18,8 @@ module.exports = function(file, state, emit) {
   const remaining = timeLeft(ttl) || state.translate('linkExpiredAlt');
   const row = html`
   <tr id="${file.id}">
-    <td>${file.name}</td>
-    <td>
+    <td title="${file.name}">${file.name}</td>
+    <td class="center-col">
       <img onclick=${copyClick} src="${assets.get(
     'copy-16.svg'
   )}" class="icon-copy" title="${state.translate('copyUrlHover')}">
@@ -28,7 +28,7 @@ module.exports = function(file, state, emit) {
       )}</span>
     </td>
     <td>${remaining}</td>
-    <td>
+    <td class="center-col">
       <img onclick=${showPopup} src="${assets.get(
     'close-16.svg'
   )}" class="icon-delete" title="${state.translate('deleteButtonHover')}">

app/templates/fileList.js

@@ -9,9 +9,13 @@ module.exports = function(state, emit) {
       <thead>
         <tr>
           <th id="uploaded-file">${state.translate('uploadedFile')}</th>
-          <th id="copy-file-list">${state.translate('copyFileList')}</th>
+          <th id="copy-file-list" class="center-col">${state.translate(
+            'copyFileList'
+          )}</th>
           <th id="expiry-file-list">${state.translate('expiryFileList')}</th>
-          <th id="delete-file-list">${state.translate('deleteFileList')}</th>
+          <th id="delete-file-list" class="center-col">${state.translate(
+            'deleteFileList'
+          )}</th>
         </tr>
       </thead>
       <tbody>

assets/main.css

@@ -296,6 +296,10 @@ td {
   padding: 17px 19px 0;
   line-height: 23px;
   position: relative;
+  text-overflow: ellipsis;
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 table {
@@ -329,6 +333,10 @@ tbody {
   width: 12%;
 }
 
+.center-col {
+  text-align: center;
+}
+
 .icon-delete,
 .icon-copy,
 .icon-check {