From 19538233fd0062d3c5103e87394cd7d098995d23 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 1 Apr 2026 15:12:28 -0700
Subject: [PATCH] Group track action buttons (info, redownload, delete) into
 single cell

Three separate table cells with fixed widths replaced by one compact
cell with a flex group. Buttons are 24px each, 2px gap, fade in on
row hover. Removes ~70px of wasted horizontal space per track row.
---
 webui/static/script.js | 40 ++++++++++--------------------------
 webui/static/style.css | 46 +++++++++++++++++++++++++++++++++---------
 2 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 037e4ce3..38ee4e6b 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -42191,35 +42191,17 @@ function _buildTrackRow(track, album, admin) {
         }
         tr.appendChild(tagTd);
 
-        // Source info button (admin only)
-        const srcTd = document.createElement('td');
-        srcTd.className = 'col-source-info';
-        const srcBtn = document.createElement('button');
-        srcBtn.className = 'enhanced-source-info-btn';
-        srcBtn.innerHTML = 'ℹ';
-        srcBtn.title = 'View download source info';
-        srcTd.appendChild(srcBtn);
-        tr.appendChild(srcTd);
-
-        // Redownload button (admin only)
-        const rdTd = document.createElement('td');
-        rdTd.className = 'col-redownload';
-        const rdBtn = document.createElement('button');
-        rdBtn.className = 'enhanced-redownload-btn';
-        rdBtn.innerHTML = '&#8635;';
-        rdBtn.title = 'Redownload this track';
-        rdTd.appendChild(rdBtn);
-        tr.appendChild(rdTd);
-
-        // Delete button (admin only)
-        const delTd = document.createElement('td');
-        delTd.className = 'col-delete';
-        const delBtn = document.createElement('button');
-        delBtn.className = 'enhanced-delete-btn';
-        delBtn.innerHTML = '&#10005;';
-        delBtn.title = 'Delete track from library';
-        delTd.appendChild(delBtn);
-        tr.appendChild(delTd);
+        // Track actions cell — source info, redownload, delete (admin only)
+        const actionsTd = document.createElement('td');
+        actionsTd.className = 'col-track-actions';
+        actionsTd.innerHTML = `
+            <div class="enhanced-track-actions-group">
+                <button class="enhanced-source-info-btn" title="View download source info">ℹ</button>
+                <button class="enhanced-redownload-btn" title="Redownload this track">&#8635;</button>
+                <button class="enhanced-delete-btn" title="Delete track from library">&#10005;</button>
+            </div>
+        `;
+        tr.appendChild(actionsTd);
     } else {
         // Report Issue button per track (non-admin)
         const reportTd = document.createElement('td');
diff --git a/webui/static/style.css b/webui/static/style.css
index 6da93187..0f95298a 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -41655,9 +41655,9 @@ textarea.enhanced-meta-field-input {
     color: rgba(255,255,255,0.4);
     font-size: 12px;
 }
-.enhanced-track-table .col-delete {
-    width: 36px;
-    text-align: center;
+.enhanced-track-table .col-track-actions {
+    width: auto;
+    text-align: right;
 }
 .enhanced-delete-btn {
     background: none;
@@ -52379,15 +52379,41 @@ tr.tag-diff-same {
     font-size: 16px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s;
 }
 .enhanced-redownload-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }
-.col-redownload { width: 30px; text-align: center; }
+/* Track actions group — source info, redownload, delete in one cell */
+.col-track-actions { width: auto; padding: 0 4px !important; }
 
-/* Source Info button */
-.enhanced-source-info-btn {
-    background: none; border: none; color: rgba(255,255,255,0.15); cursor: pointer;
-    font-size: 14px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s;
+.enhanced-track-actions-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    justify-content: flex-end;
+    opacity: 0.4;
+    transition: opacity 0.15s;
 }
-.enhanced-source-info-btn:hover { color: rgba(100,181,246,0.8); background: rgba(100,181,246,0.1); }
-.col-source-info { width: 28px; text-align: center; }
+tr:hover .enhanced-track-actions-group { opacity: 1; }
+
+.enhanced-source-info-btn,
+.enhanced-redownload-btn {
+    background: none; border: none; cursor: pointer;
+    width: 24px; height: 24px; border-radius: 5px;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s; padding: 0;
+}
+
+.enhanced-source-info-btn { color: rgba(255,255,255,0.35); font-size: 13px; }
+.enhanced-source-info-btn:hover { color: rgba(100,181,246,0.9); background: rgba(100,181,246,0.1); }
+
+.enhanced-redownload-btn { color: rgba(255,255,255,0.35); font-size: 15px; }
+.enhanced-redownload-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }
+
+.enhanced-delete-btn {
+    background: none; border: none; cursor: pointer;
+    width: 24px; height: 24px; border-radius: 5px;
+    display: flex; align-items: center; justify-content: center;
+    color: rgba(255,255,255,0.35); font-size: 13px;
+    transition: all 0.15s; padding: 0;
+}
+.enhanced-delete-btn:hover { color: #ef5350; background: rgba(239,83,80,0.1); }
 
 /* Source Info Popover */
 .source-info-popover {