From d401dc8af13d7ba330b16bb52f4679cfb3af155b Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 11 Mar 2026 23:01:47 -0700
Subject: [PATCH] Two-column badge layout for artist cards with 7+ service
 matches

---
 webui/static/script.js | 44 +++++++++++++++++++++++++++++++++++++++---
 webui/static/style.css | 20 +++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index fa0e9dc7..8b64bc86 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -32603,7 +32603,15 @@ function createLibraryArtistCard(artist) {
     if (badgeSources.length > 0) {
         const badgeContainer = document.createElement('div');
         badgeContainer.className = 'card-badge-container';
-        badgeSources.forEach(source => {
+
+        // Separate service badges from watch badge
+        const serviceBadges = badgeSources.filter(s => !s.isWatch);
+        const watchBadge = badgeSources.find(s => s.isWatch);
+        const maxPerColumn = 6;
+        const needsOverflow = serviceBadges.length > maxPerColumn;
+
+        // Helper to create a badge icon element
+        const createBadgeIcon = (source) => {
             const icon = document.createElement('div');
             icon.className = `${source.cls} source-card-icon`;
             icon.title = source.title;
@@ -32630,8 +32638,38 @@ function createLibraryArtistCard(artist) {
                     window.open(source.url, '_blank');
                 };
             }
-            badgeContainer.appendChild(icon);
-        });
+            return icon;
+        };
+
+        if (needsOverflow) {
+            // Overflow column (left) — watch badge first, then extra service badges
+            const overflowCol = document.createElement('div');
+            overflowCol.className = 'badge-overflow-column';
+            if (watchBadge) {
+                overflowCol.appendChild(createBadgeIcon(watchBadge));
+            }
+            serviceBadges.slice(maxPerColumn).forEach(source => {
+                overflowCol.appendChild(createBadgeIcon(source));
+            });
+            badgeContainer.appendChild(overflowCol);
+
+            // Primary column (right) — first 6 service badges
+            const primaryCol = document.createElement('div');
+            primaryCol.className = 'badge-primary-column';
+            serviceBadges.slice(0, maxPerColumn).forEach(source => {
+                primaryCol.appendChild(createBadgeIcon(source));
+            });
+            badgeContainer.appendChild(primaryCol);
+        } else {
+            // Single column — service badges + watch badge last
+            serviceBadges.forEach(source => {
+                badgeContainer.appendChild(createBadgeIcon(source));
+            });
+            if (watchBadge) {
+                badgeContainer.appendChild(createBadgeIcon(watchBadge));
+            }
+        }
+
         card.appendChild(badgeContainer);
     }
 
diff --git a/webui/static/style.css b/webui/static/style.css
index ca64db3d..7d300bf0 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -29210,6 +29210,26 @@ body {
     filter: invert(1);
 }
 
+/* Two-column badge layout for overflow */
+.card-badge-container:has(.badge-overflow-column) {
+    flex-direction: row;
+    gap: 3px;
+    align-items: flex-start;
+}
+
+.badge-primary-column,
+.badge-overflow-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+}
+
+.badge-overflow-column {
+    width: 24px;
+    flex-shrink: 0;
+}
+
 .watch-card-icon {
     cursor: pointer;
     font-size: 10px;