Move card logo to bottom right with absolute positioning, fix duplication

public/app.js

@@ -444,23 +444,29 @@ function renderDownloads() {
 }
 
 function updateDownloadCard(card, download) {
-  // Remove old header-right container if it exists (to prevent duplicates)
+  // Remove old header-right container if it exists
   const oldRightSide = card.querySelector('.download-header-right');
   if (oldRightSide) {
     oldRightSide.remove();
   }
 
-  // Remove old user badges directly in header (old structure)
+  // Remove old user badges directly in header
   const oldBadges = card.querySelectorAll('.download-header .download-user-badge');
   oldBadges.forEach(badge => badge.remove());
 
-  // Remove old client logo directly in header (old structure)
+  // Remove old client logo from header (old structure)
-  const oldLogo = card.querySelector('.download-header .download-client-logo-wrapper');
+  const oldLogoInHeader = card.querySelector('.download-header .download-client-logo-wrapper');
-  if (oldLogo) {
+  if (oldLogoInHeader) {
-    oldLogo.remove();
+    oldLogoInHeader.remove();
   }
 
-  // Add new right-side container with user badge and logo
+  // Remove old client logo from card (new structure) if it exists
+  const oldLogoInCard = card.querySelector('.download-card-logo-wrapper');
+  if (oldLogoInCard) {
+    oldLogoInCard.remove();
+  }
+
+  // Add new right-side container with user badge only
   const header = card.querySelector('.download-header');
   if (header && !header.querySelector('.download-header-right')) {
     const rightSide = document.createElement('div');
@@ -488,27 +494,28 @@ function updateDownloadCard(card, download) {
       rightSide.appendChild(matchedBadge);
     }
 
-    if (download.client) {
-      const clientLogoWrapper = document.createElement('span');
-      clientLogoWrapper.className = 'download-client-logo-wrapper download-card-logo-wrapper';
-
-      const clientLogo = document.createElement('img');
-      clientLogo.className = 'download-client-logo';
-      clientLogo.src = `/images/clients/${download.client}.svg`;
-      clientLogo.alt = `${download.instanceName || download.client} icon`;
-      clientLogo.title = download.instanceName || download.client;
-      clientLogo.onerror = () => {
-        clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase();
-        clientLogoWrapper.classList.add('fallback');
-      };
-
-      clientLogoWrapper.appendChild(clientLogo);
-      rightSide.appendChild(clientLogoWrapper);
-    }
-
     header.appendChild(rightSide);
   }
 
+  // Add client logo to card (positioned at bottom right via CSS)
+  if (download.client && !card.querySelector('.download-card-logo-wrapper')) {
+    const clientLogoWrapper = document.createElement('span');
+    clientLogoWrapper.className = 'download-client-logo-wrapper download-card-logo-wrapper';
+
+    const clientLogo = document.createElement('img');
+    clientLogo.className = 'download-client-logo';
+    clientLogo.src = `/images/clients/${download.client}.svg`;
+    clientLogo.alt = `${download.instanceName || download.client} icon`;
+    clientLogo.title = download.instanceName || download.client;
+    clientLogo.onerror = () => {
+      clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase();
+      clientLogoWrapper.classList.add('fallback');
+    };
+
+    clientLogoWrapper.appendChild(clientLogo);
+    card.appendChild(clientLogoWrapper);
+  }
+
   // Update status
   const statusEl = card.querySelector('.download-status');
   if (statusEl && statusEl.textContent !== download.status) {
@@ -685,7 +692,7 @@ function createDownloadCard(download) {
     header.appendChild(blBtn);
   }
 
-  // Right side container for user badge and client logo
+  // Right side container for user badge only
   const rightSide = document.createElement('div');
   rightSide.className = 'download-header-right';
 
@@ -715,7 +722,9 @@ function createDownloadCard(download) {
     rightSide.appendChild(matchedBadge);
   }
 
-  // Add client logo
+  header.appendChild(rightSide);
+
+  // Add client logo to card (positioned at bottom right via CSS)
   if (download.client) {
     const clientLogoWrapper = document.createElement('span');
     clientLogoWrapper.className = 'download-client-logo-wrapper download-card-logo-wrapper';
@@ -732,10 +741,8 @@ function createDownloadCard(download) {
     };
 
     clientLogoWrapper.appendChild(clientLogo);
-    rightSide.appendChild(clientLogoWrapper);
+    card.appendChild(clientLogoWrapper);
   }
-
-  header.appendChild(rightSide);
   
   const title = document.createElement('h3');
   title.className = 'download-title';

public/style.css

@@ -1429,10 +1429,13 @@ body {
   justify-content: center;
 }
 
-/* Card-specific logo wrapper (4x larger) */
+/* Card-specific logo wrapper positioned at bottom right */
 .download-card-logo-wrapper {
-  width: 64px;
+  width: 48px;
-  height: 64px;
+  height: 48px;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
 }
 
 .download-client-logo {
@@ -1450,7 +1453,7 @@ body {
 }
 
 .download-card-logo-wrapper.fallback {
-  font-size: 40px;
+  font-size: 30px;
   border-radius: 4px;
 }