From 8ac0e05b15e5ac5fe7f3447dc1cf2c4fe731f093 Mon Sep 17 00:00:00 2001
From: xpltd <dev@xpltd.co>
Date: Thu, 19 Mar 2026 06:47:55 -0500
Subject: [PATCH] Fix table overflow, clickable source URLs, duplicate preview

Table overflow fix:
- table-layout: fixed prevents columns expanding beyond max-width
- min-width: 0 on flex children ensures text-overflow works
- Long filenames now properly truncate with ellipsis

Clickable source URLs:
- Name column is now an <a> link to the original source URL
- Opens in new tab (target=_blank, rel=noopener)
- Styled to inherit text color, underline + accent on hover
- @click.stop prevents row selection interference

Duplicate preview box fix:
- When urlInfo.type === 'unknown', urlInfo is now set to null
- Previously both the preview box ('VIDEO' badge) and error message
  showed simultaneously. Now only the error message appears.
---
 frontend/src/components/DownloadTable.vue | 23 ++++++++++++++++++++---
 frontend/src/components/UrlInput.vue      |  1 +
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DownloadTable.vue b/frontend/src/components/DownloadTable.vue
index cf7ed2c..1040fd3 100644
--- a/frontend/src/components/DownloadTable.vue
+++ b/frontend/src/components/DownloadTable.vue
@@ -192,13 +192,20 @@ async function clearJob(jobId: string): Promise<void> {
       </thead>
       <TransitionGroup name="table-row" tag="tbody">
         <tr v-for="job in sortedJobs" :key="job.id" :class="'row-' + job.status">
-          <td class="col-name" :title="job.url">
-            <span class="name-with-icon">
+          <td class="col-name">
+            <a
+              class="name-with-icon"
+              :href="job.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              :title="job.url"
+              @click.stop
+            >
               <!-- Media type icon -->
               <svg v-if="isAudioJob(job)" class="media-icon audio-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
               <svg v-else class="media-icon video-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
               <span class="name-text">{{ displayName(job) }}</span>
-            </span>
+            </a>
           </td>
           <td class="col-status">
             <span class="status-badge" :class="'badge-' + job.status">
@@ -298,6 +305,7 @@ async function clearJob(jobId: string): Promise<void> {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
+  table-layout: fixed;
 }
 
 .download-table thead {
@@ -356,6 +364,14 @@ async function clearJob(jobId: string): Promise<void> {
   align-items: center;
   gap: var(--space-sm);
   overflow: hidden;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
+a.name-with-icon:hover .name-text {
+  text-decoration: underline;
+  color: var(--color-accent-primary, #00a8ff);
 }
 
 .media-icon {
@@ -368,6 +384,7 @@ async function clearJob(jobId: string): Promise<void> {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
 .col-status { width: 100px; }
diff --git a/frontend/src/components/UrlInput.vue b/frontend/src/components/UrlInput.vue
index 1ef6894..023196f 100644
--- a/frontend/src/components/UrlInput.vue
+++ b/frontend/src/components/UrlInput.vue
@@ -195,6 +195,7 @@ function handlePaste(): void {
         // Check if URL yielded anything useful
         if (urlInfo.value?.type === 'unknown') {
           analyzeError.value = 'No downloadable media found at this URL.'
+          urlInfo.value = null
         } else if (!urlInfo.value && !extractError.value) {
           analyzeError.value = 'Could not reach this URL. Check the address and try again.'
         }