From 24755865236273edee4d187c990173c7ada55e97 Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Mon, 25 Aug 2025 17:43:13 -0700
Subject: [PATCH] style

---
 webui/static/script.js |  4 ++--
 webui/static/style.css | 29 +++++++++++++++++++++--------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index f84c3ee3..44961664 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -1730,8 +1730,8 @@ async function openDownloadMissingModal(playlistId) {
                                 ${tracks.map((track, index) => `
                                     <tr data-track-index="${index}">
                                         <td class="track-number">${index + 1}</td>
-                                        <td class="track-name">${escapeHtml(track.name)}</td>
-                                        <td class="track-artist">${track.artists.join(', ')}</td>
+                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
+                                        <td class="track-artist" title="${escapeHtml(track.artists.join(', '))}">${track.artists.join(', ')}</td>
                                         <td class="track-duration">${formatDuration(track.duration_ms)}</td>
                                         <td class="track-match-status match-checking" id="match-${index}">🔍 Pending</td>
                                         <td class="track-download-status" id="download-${index}">-</td>
diff --git a/webui/static/style.css b/webui/static/style.css
index 2312f9c9..ac9c5b63 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -4751,6 +4751,7 @@ body {
 .download-tracks-table {
     width: 100%;
     border-collapse: collapse;
+    table-layout: fixed; /* Enable fixed layout for even column distribution */
 }
 
 .download-tracks-table th {
@@ -4758,7 +4759,7 @@ body {
     color: #ffffff;
     font-weight: 600;
     font-size: 12px;
-    text-align: left;
+    text-align: center;
     padding: 12px 15px;
     border-bottom: 1px solid #555555;
     position: sticky;
@@ -4780,31 +4781,40 @@ body {
 .track-number {
     color: #888888;
     font-weight: 500;
-    width: 50px;
+    width: 5%; /* 5% for track numbers */
     text-align: center;
 }
 
 .track-name {
     font-weight: 600;
     color: #ffffff;
-    max-width: 200px;
+    width: 25%; /* 25% for track names */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .track-artist {
     color: #cccccc;
-    max-width: 150px;
+    width: 20%; /* 20% for artist names */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .track-duration {
     color: #999999;
     text-align: center;
-    width: 80px;
+    width: 8%; /* 8% for duration */
 }
 
 .track-match-status {
     text-align: center;
-    width: 100px;
+    width: 15%; /* 15% for library match status */
     font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .match-found { color: #4CAF50; }
@@ -4813,8 +4823,11 @@ body {
 
 .track-download-status {
     text-align: center;
-    width: 120px;
+    width: 20%; /* 20% for download status with progress */
     font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .download-searching { color: #2196F3; }
@@ -4824,7 +4837,7 @@ body {
 
 .track-actions {
     text-align: center;
-    width: 80px;
+    width: 7%; /* 7% for action buttons */
 }
 
 .track-result-card .track-actions{