From 9a1c3b4124c676091530bc54d10b7f6ac9c98c90 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:24:33 -0700
Subject: [PATCH] Fix watchlist badge positioning and mobile card sizing

---
 webui/static/script.js | 48 ++++++++++++++-----------------
 webui/static/style.css | 65 ++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 29 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 3f4dbefc..8cc198ff 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -31811,6 +31811,14 @@ function createLibraryArtistCard(artist) {
     if (artist.genius_url) {
         badgeSources.push({ cls: 'genius-card-icon', logo: GENIUS_LOGO_URL, fallback: 'GEN', title: 'View on Genius', url: artist.genius_url });
     }
+    // Add watchlist indicator as the last badge
+    const hasExternalId = artist.itunes_artist_id || artist.spotify_artist_id;
+    if (artist.is_watched) {
+        badgeSources.push({ cls: 'watch-card-icon watched', logo: null, fallback: '👁️', fallbackExpanded: 'Watching', title: 'On your watchlist', url: null, isWatch: true });
+    } else if (hasExternalId) {
+        badgeSources.push({ cls: 'watch-card-icon', logo: null, fallback: '👁️', fallbackExpanded: 'Watch', title: 'Add to Watchlist', url: null, isWatch: true, unwatched: true });
+    }
+
     if (badgeSources.length > 0) {
         const badgeContainer = document.createElement('div');
         badgeContainer.className = 'card-badge-container';
@@ -31824,40 +31832,28 @@ function createLibraryArtistCard(artist) {
                 img.style.cssText = 'width: 16px; height: auto; display: block;';
                 img.onerror = () => { icon.textContent = source.fallback; };
                 icon.appendChild(img);
+            } else if (source.fallbackExpanded) {
+                icon.innerHTML = `<span class="watch-icon-emoji">${source.fallback}</span><span class="watch-icon-label">${source.fallbackExpanded}</span>`;
             } else {
                 icon.textContent = source.fallback;
             }
-            icon.onclick = (e) => {
-                e.stopPropagation();
-                window.open(source.url, '_blank');
-            };
+            if (source.isWatch && source.unwatched) {
+                icon.style.opacity = '0.4';
+                icon.onclick = (e) => {
+                    e.stopPropagation();
+                    toggleLibraryCardWatchlist(icon, artist);
+                };
+            } else if (source.url) {
+                icon.onclick = (e) => {
+                    e.stopPropagation();
+                    window.open(source.url, '_blank');
+                };
+            }
             badgeContainer.appendChild(icon);
         });
         card.appendChild(badgeContainer);
     }
 
-    // Add watchlist button/indicator on the card
-    const hasExternalId = artist.itunes_artist_id || artist.spotify_artist_id;
-    if (artist.is_watched) {
-        const watchIcon = document.createElement('div');
-        watchIcon.className = 'watchlist-card-icon';
-        watchIcon.title = 'On your watchlist';
-        watchIcon.style.top = badgeOffset + 'px';
-        watchIcon.textContent = '👁️';
-        card.appendChild(watchIcon);
-    } else if (hasExternalId) {
-        const watchBtn = document.createElement('button');
-        watchBtn.className = 'library-card-watchlist-btn';
-        watchBtn.style.top = badgeOffset + 'px';
-        watchBtn.title = 'Add to Watchlist';
-        watchBtn.innerHTML = '<span class="watchlist-icon">👁️</span><span class="watchlist-text">Watch</span>';
-        watchBtn.onclick = (e) => {
-            e.stopPropagation();
-            toggleLibraryCardWatchlist(watchBtn, artist);
-        };
-        card.appendChild(watchBtn);
-    }
-
     // Create image element
     const imageContainer = document.createElement("div");
     imageContainer.className = "library-artist-image";
diff --git a/webui/static/style.css b/webui/static/style.css
index eea5f297..b6986ad1 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -16372,6 +16372,7 @@ body {
 
     .library-artist-card {
         border-radius: 12px;
+        aspect-ratio: 0.65;
     }
 
     .library-artist-info {
@@ -16381,6 +16382,29 @@ body {
     .library-artist-name {
         font-size: 14px;
     }
+
+    .card-badge-container {
+        top: 4px;
+        right: 4px;
+        gap: 2px;
+    }
+
+    .source-card-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 7px;
+        border-radius: 3px;
+    }
+
+    .source-card-icon img {
+        width: 12px !important;
+    }
+
+    .watch-card-icon {
+        width: 18px !important;
+        height: 18px !important;
+        font-size: 8px !important;
+    }
 }
 
 /* ========================================
@@ -28339,13 +28363,12 @@ body {
 .card-badge-container {
     position: absolute;
     top: 8px;
+    align-items: flex-end;
     right: 8px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
     z-index: 100;
-    max-height: calc(100% - 80px);
-    overflow: hidden;
 }
 
 .source-card-icon {
@@ -28401,6 +28424,42 @@ body {
 .genius-card-icon:hover {
     background: #ffff64;
 }
+.watch-card-icon {
+    cursor: pointer;
+    font-size: 10px;
+    white-space: nowrap;
+    width: 24px !important;
+    height: 24px !important;
+    padding: 0 !important;
+    align-self: flex-end;
+    overflow: hidden;
+    transition: width 0.25s ease, padding 0.25s ease;
+}
+.watch-icon-emoji {
+    flex-shrink: 0;
+}
+.watch-icon-label {
+    opacity: 0;
+    max-width: 0;
+    overflow: hidden;
+    transition: opacity 0.2s ease 0.05s, max-width 0.25s ease;
+}
+.library-artist-card:hover .watch-card-icon {
+    width: auto !important;
+    padding: 3px 7px !important;
+}
+.library-artist-card:hover .watch-icon-label {
+    opacity: 1;
+    max-width: 60px;
+    margin-left: 2px;
+}
+.watch-card-icon.watched {
+    background: rgba(255, 193, 7, 0.2);
+    border-color: rgba(255, 193, 7, 0.4);
+}
+.watch-card-icon:hover {
+    background: rgba(255, 193, 7, 0.35);
+}
 
 /* Artist detail page source link buttons */
 .source-link-btn {