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,7 +494,11 @@ function updateDownloadCard(card, download) {
       rightSide.appendChild(matchedBadge);
     }
 
-    if (download.client) {
+    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';
 
@@ -503,10 +513,7 @@ function updateDownloadCard(card, download) {
     };
 
     clientLogoWrapper.appendChild(clientLogo);
-      rightSide.appendChild(clientLogoWrapper);
+    card.appendChild(clientLogoWrapper);
-    }
-
-    header.appendChild(rightSide);
   }
 
   // Update 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,11 +741,9 @@ function createDownloadCard(download) {
     };
 
     clientLogoWrapper.appendChild(clientLogo);
-    rightSide.appendChild(clientLogoWrapper);
+    card.appendChild(clientLogoWrapper);
   }
   
-  header.appendChild(rightSide);
-  
   const title = document.createElement('h3');
   title.className = 'download-title';
   title.textContent = 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;
 }