From 7d4c55fc37ae6831814d9a86a7eba92ed09a6161 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 9 Jul 2026 21:52:35 -0700
Subject: [PATCH] fix JoinedArtists not truncating on ItemCard

---
 src/renderer/components/item-card/item-card.module.css | 8 ++++++++
 src/renderer/components/item-card/item-card.tsx        | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css
index 026212d79..43138bded 100644
--- a/src/renderer/components/item-card/item-card.module.css
+++ b/src/renderer/components/item-card/item-card.module.css
@@ -223,3 +223,11 @@
 .row.muted.compact {
     color: var(--theme-colors-foreground);
 }
+
+.row.artists-row {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+}
diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx
index 7c3addab9..723907390 100644
--- a/src/renderer/components/item-card/item-card.tsx
+++ b/src/renderer/components/item-card/item-card.tsx
@@ -1154,6 +1154,7 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                             artists={data.albumArtists}
                             linkProps={{ fw: 400, isMuted: true }}
                             rootTextProps={{
+                                className: styles.artistsRow,
                                 fw: 400,
                                 isMuted: type === 'compact' ? false : true,
                                 size: 'sm',
@@ -1406,6 +1407,7 @@ const ItemCardRow = memo(
 
         // All rows except the first one (index 0) should be muted
         const isMuted = index > 0 || row.isMuted;
+        const isArtistRow = row.id === 'albumArtists' || row.id === 'artists';
 
         const formattedContent = useMemo(() => {
             if (!data) {
@@ -1432,6 +1434,7 @@ const ItemCardRow = memo(
         return (
             <Text
                 className={clsx(styles.row, alignmentClass, {
+                    [styles.artistsRow]: isArtistRow,
                     [styles.bold]: index === 0,
                     [styles.compact]: type === 'compact',
                     [styles.default]: type === 'default',