diff --git a/buzz/static/buzz.css b/buzz/static/buzz.css
index eba8530..2589353 100644
--- a/buzz/static/buzz.css
+++ b/buzz/static/buzz.css
@@ -130,15 +130,23 @@ button.secondary {
   font-weight: bold;
 }
 
-.table-wrap {
+.table-container {
   overflow-x: auto;
+  max-width: 100%;
+}
+
+.table-container table {
+  border-collapse: collapse;
+}
+
+.table-container td:first-of-type {
+  min-width: 200px;
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.8rem;
-  table-layout: fixed;
 }
 
 th {
@@ -195,15 +203,42 @@ tr:hover {
 
 .trunc-cell {
   position: relative;
-  max-width: 1px;
+  max-width: 0;
+  overflow: hidden;
+}
+
+/* normal state: real ellipsis */
+.trunc-idle {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.trunc-content {
+/* hover state: hidden by default */
+.trunc-scroll-wrap {
+  display: none;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.trunc-scroll {
   display: inline-block;
   white-space: nowrap;
 }
 
-.trunc-cell:hover .trunc-content {
+/* swap on hover */
+.trunc-cell:hover .trunc-idle {
+  display: none;
+}
+
+.trunc-cell:hover .trunc-scroll-wrap {
+  display: block;
+}
+
+.trunc-cell:hover .trunc-scroll {
   animation: scroll-text 4s linear infinite;
 }
 
@@ -242,42 +277,31 @@ code {
   padding: 40px;
 }
 
+.trashcan-opts,
 .delete-container {
   display: flex;
   width: 100%;
   height: 100%;
   min-height: 35px;
-  align-items: stretch;
+  min-width: 70px;
 }
 
+.trashcan-opts,
 .confirm-opts {
-  display: none;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: space-evenly;
   width: 100%;
   height: 100%;
-  background: rgba(255, 184, 108, 0.2);
-  gap: 15px;
+  gap: 0;
 }
 
-.opt {
-  cursor: pointer;
-  text-align: center;
-  font-weight: bold;
-  color: var(--orange);
-}
-
-.opt-y:hover {
-  color: var(--green);
-  text-shadow: 0 0 5px rgba(80, 250, 123, 0.5);
-}
-
-.opt-n:hover {
-  color: var(--red);
-  text-shadow: 0 0 5px rgba(255, 85, 85, 0.5);
+.confirm-opts {
+  display: none;
+  background: rgba(255, 184, 108, 0.2);
 }
 
+.opt,
 .btn-r,
 .btn-del,
 .btn-x {
@@ -303,6 +327,16 @@ code {
   background: rgba(255, 85, 85, 0.1);
 }
 
+.opt-y:hover {
+  color: var(--green);
+  text-shadow: 0 0 5px rgba(80, 250, 123, 0.5);
+}
+
+.opt-n:hover {
+  color: var(--red);
+  text-shadow: 0 0 5px rgba(255, 85, 85, 0.5);
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
diff --git a/buzz/templates/torrents.html b/buzz/templates/torrents.html
index 274788d..9babb3d 100644
--- a/buzz/templates/torrents.html
+++ b/buzz/templates/torrents.html
@@ -118,23 +118,32 @@
 
     th:nth-child(6),
     td:nth-child(6) {
-      width: 60px;
+      width: 150px;
     }
 
     th:nth-child(7),
     td:nth-child(7) {
-      width: 150px;
+      width: 85px;
     }
 
     th:nth-child(8),
     td:nth-child(8) {
-      width: 85px;
+      width: 80px;
+      text-align: center;
     }
 
-    th:nth-child(9),
-    td:nth-child(9) {
-      width: 75px;
-      text-align: right;
+    @media (max-width: 500px) {
+
+      th:nth-child(2),
+      td:nth-child(2),
+      th:nth-child(3),
+      td:nth-child(3),
+      th:nth-child(6),
+      td:nth-child(6),
+      th:nth-child(7),
+      td:nth-child(7) {
+        display: none;
+      }
     }
 
     .status {
@@ -217,7 +226,7 @@
       </div>
     </section>
 
-    <div class="table-wrap">
+    <div class="table-container">
       <table id="torrent-table">
         <thead>
           <tr>
@@ -226,9 +235,8 @@
             <th onclick="sortTable(2)">Prog</th>
             <th onclick="sortTable(3)">Size</th>
             <th onclick="sortTable(4)">Files</th>
-            <th onclick="sortTable(5)">Links</th>
-            <th onclick="sortTable(6)">Ended</th>
-            <th onclick="sortTable(7)">ID</th>
+            <th onclick="sortTable(5)">Ended</th>
+            <th onclick="sortTable(6)">ID</th>
             <th>Act</th>
           </tr>
         </thead>
@@ -236,13 +244,16 @@
           {% for torrent in torrents %}
           <tr>
             <td class="name trunc-cell" data-value="{{ torrent.name }}">
-              <div class="trunc-content">{{ torrent.name }}</div>
+              <div class="trunc-idle">{{ torrent.name }}</div>
+              <div class="trunc-scroll-wrap">
+                <span class="trunc-scroll">{{ torrent.name }}</span>
+              </div>
             </td>
-            <td data-value="{{ torrent.status }}"><span class="status status-{{ torrent.status }}">[{{ torrent.status }}]</span></td>
+            <td data-value="{{ torrent.status }}"><span class="status status-{{ torrent.status }}">[{{ torrent.status
+                }}]</span></td>
             <td data-value="{{ torrent.progress }}">{{ torrent.progress }}%</td>
             <td data-value="{{ torrent.bytes }}">{{ torrent.size }}</td>
             <td>{{ torrent.selected_files }}</td>
-            <td>{{ torrent.links }}</td>
             <td class="comment" data-value="{{ torrent.ended }}">{{ torrent.ended }}</td>
             <td class="yellow" data-value="{{ torrent.short_id }}"><code>{{ torrent.short_id }}</code></td>
             <td>
@@ -259,7 +270,7 @@
           </tr>
           {% else %}
           <tr>
-            <td colspan="9" class="empty">No cached torrents yet. Wait for the first sync or trigger <code>POST
+            <td colspan="8" class="empty">No cached torrents yet. Wait for the first sync or trigger <code>POST
                 /sync</code>.</td>
           </tr>
           {% endfor %}
diff --git a/buzz/templates/trashcan.html b/buzz/templates/trashcan.html
index ba267c1..bf956ce 100644
--- a/buzz/templates/trashcan.html
+++ b/buzz/templates/trashcan.html
@@ -1,19 +1,50 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>buzz: trashcan</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐝</text></svg>">
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐝</text></svg>">
   <link rel="stylesheet" href="/static/buzz.css">
   <style>
-    th:nth-child(1), td:nth-child(1) { width: auto; }
-    th:nth-child(2), td:nth-child(2) { width: 100px; }
-    th:nth-child(3), td:nth-child(3) { width: 80px; }
-    th:nth-child(4), td:nth-child(4) { width: 220px; }
-    th:nth-child(5), td:nth-child(5) { width: 110px; text-align: right; }
+    th:nth-child(1),
+    td:nth-child(1) {
+      width: auto;
+    }
+
+    th:nth-child(2),
+    td:nth-child(2) {
+      width: 100px;
+    }
+
+    th:nth-child(3),
+    td:nth-child(3) {
+      width: 80px;
+    }
+
+    th:nth-child(4),
+    td:nth-child(4) {
+      width: 220px;
+    }
+
+    th:nth-child(5),
+    td:nth-child(5) {
+      width: 110px;
+      text-align: right;
+    }
+
+    @media (max-width: 500px) {
+
+      th:nth-child(4),
+      td:nth-child(4) {
+        display: none;
+      }
+    }
   </style>
 </head>
+
 <body>
   <main>
     <div class="prompt">
@@ -42,7 +73,7 @@
     <div class="error"><span class="label-red">[ERROR]</span> {{ last_error }}</div>
     {% endif %}
 
-    <div class="table-wrap">
+    <div class="table-container">
       <table id="torrent-table">
         <thead>
           <tr>
@@ -56,27 +87,43 @@
         <tbody>
           {% for torrent in trash_torrents %}
           <tr>
-            <td class="name trunc-cell" data-value="{{ torrent.name }}"><div class="trunc-content">{{ torrent.name }}</div></td>
+            <td class="name trunc-cell" data-value="{{ torrent.name }}">
+              <div class="trunc-idle">{{ torrent.name }}</div>
+              <div class="trunc-scroll-wrap">
+                <span class="trunc-scroll">{{ torrent.name }}</span>
+              </div>
+            </td>
             <td data-value="{{ torrent.bytes }}">{{ torrent.size }}</td>
             <td>{{ torrent.file_count }}</td>
             <td class="comment" data-value="{{ torrent.deleted_at }}">{{ torrent.deleted_at }}</td>
             <td>
               <div class="delete-container">
                 <div class="confirm-opts" id="confirm-restore-{{ torrent.hash }}">
-                  <div class="opt opt-y" onclick="restoreTrash('{{ torrent.hash }}', this)" title="Confirm Restore">[Y]</div>
+                  <div class="opt opt-y" onclick="restoreTrash('{{ torrent.hash }}', this)" title="Confirm Restore">[Y]
+                  </div>
                   <div class="opt opt-n" onclick="toggleRestore('{{ torrent.hash }}', false)" title="Cancel">[N]</div>
                 </div>
-                <div class="btn-r" id="btn-r-{{ torrent.hash }}" onclick="toggleRestore('{{ torrent.hash }}', true)" title="Restore to Cache">[R]</div>
+
                 <div class="confirm-opts" id="confirm-del-{{ torrent.hash }}">
-                  <div class="opt opt-y" onclick="deleteTrash('{{ torrent.hash }}', this)" title="Confirm Permanent Delete">[Y]</div>
+                  <div class="opt opt-y" onclick="deleteTrash('{{ torrent.hash }}', this)"
+                    title="Confirm Permanent Delete">[Y]</div>
                   <div class="opt opt-n" onclick="toggleDel('{{ torrent.hash }}', false)" title="Cancel">[N]</div>
                 </div>
-                <div class="btn-x" id="btn-del-{{ torrent.hash }}" onclick="toggleDel('{{ torrent.hash }}', true)" title="Delete Permanently">[D]</div>
+
+                <div class="trashcan-opts" id="trashcan-opts-{{ torrent.hash }}">
+                  <div class="opt btn-r" onclick="toggleRestore('{{ torrent.hash }}', true)" title="Restore to Cache">
+                    [R]
+                  </div>
+                  <div class="opt btn-x" onclick="toggleDel('{{ torrent.hash }}', true)" title="Delete Permanently">[D]
+                  </div>
+                </div>
               </div>
             </td>
           </tr>
           {% else %}
-          <tr><td colspan="5" class="empty">Trashcan is empty.</td></tr>
+          <tr>
+            <td colspan="5" class="empty">Trashcan is empty.</td>
+          </tr>
           {% endfor %}
         </tbody>
       </table>
@@ -86,15 +133,15 @@
   <script src="/static/buzz.js"></script>
   <script>
     function toggleRestore(id, show) {
-      document.getElementById("confirm-restore-" + id).style.display = show ? "flex" : "none";
-      document.getElementById("btn-r-" + id).style.display = show ? "none" : "flex";
-      document.getElementById("btn-del-" + id).style.display = show ? "none" : "flex";
+      document.getElementById('confirm-restore-' + id).style.display = show ? 'flex' : 'none';
+      document.getElementById('confirm-del-' + id).style.display = 'none';
+      document.getElementById('trashcan-opts-' + id).style.display = show ? 'none' : 'flex';
     }
 
     function toggleDel(id, show) {
-      document.getElementById("confirm-del-" + id).style.display = show ? "flex" : "none";
-      document.getElementById("btn-r-" + id).style.display = show ? "none" : "flex";
-      document.getElementById("btn-del-" + id).style.display = show ? "none" : "flex";
+      document.getElementById('confirm-del-' + id).style.display = show ? 'flex' : 'none';
+      document.getElementById('confirm-restore-' + id).style.display = 'none';
+      document.getElementById('trashcan-opts-' + id).style.display = show ? 'none' : 'flex';
     }
 
     async function restoreTrash(hash, el) {
@@ -106,15 +153,15 @@
       try {
         const res = await fetch("/api/torrents/restore", {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ hash: hash })
+          headers: {"Content-Type": "application/json"},
+          body: JSON.stringify({hash: hash})
         });
         const data = await res.json();
         if (data.error) {
           throw new Error(data.error);
         }
 
-        await fetch("/sync", { method: "POST" });
+        await fetch("/sync", {method: "POST"});
         location.reload();
       } catch (err) {
         if (el) {
@@ -134,8 +181,8 @@
       try {
         const res = await fetch("/api/torrents/delete_permanently", {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ hash: hash })
+          headers: {"Content-Type": "application/json"},
+          body: JSON.stringify({hash: hash})
         });
         const data = await res.json();
         if (data.error) {
@@ -157,4 +204,5 @@
     });
   </script>
 </body>
+
 </html>