From e4bfe13072f7f53359fa01014f86e002d1a1c17e Mon Sep 17 00:00:00 2001
From: agatha <agatha@juggalol.com>
Date: Sat, 9 May 2026 21:30:18 +0000
Subject: [PATCH] Feat: Add gradient fade on truncated tag rows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/app/library/library.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/library/library.component.ts b/ui/src/app/library/library.component.ts
index 6a26e92..a038f7e 100644
--- a/ui/src/app/library/library.component.ts
+++ b/ui/src/app/library/library.component.ts
@@ -118,7 +118,8 @@ const PLACEHOLDER_SVG = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/s
     .image-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
     .image-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
     .card-skeleton { height: 200px; }
-    .tag-row { padding: 6px; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
+    .tag-row { padding: 6px; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; position: relative; }
+    .tag-row::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2rem; background: linear-gradient(to right, transparent, var(--surface)); pointer-events: none; }
     .home-link { color: inherit; text-decoration: none; cursor: pointer; }
     .empty-state { text-align: center; padding: 60px 0; color: var(--text-muted); }
     .empty-icon { display: block; font-size: 2rem; margin-bottom: 12px; }