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 (