From 235fb4d13f1b5d8dab363f7baa2ef18585aaaf01 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 17 Jul 2026 11:10:56 -0700 Subject: [PATCH] fix additional instances of JoinedArtists not truncating --- .../columns/album-artist-column.tsx | 6 +++++- .../item-detail-list/columns/artist-column.tsx | 6 +++++- .../columns/artists-column.module.css | 10 ++++++++++ .../columns/title-artist-column.module.css | 4 ++++ .../columns/title-artist-column.tsx | 14 ++++++++++++-- .../columns/title-combined-column.module.css | 4 ++++ .../columns/title-combined-column.tsx | 14 ++++++++++++-- .../player/components/left-controls.module.css | 11 +++++++++++ .../features/player/components/left-controls.tsx | 1 + 9 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 src/renderer/components/item-list/item-detail-list/columns/artists-column.module.css diff --git a/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx b/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx index 7269215cf..5b4489876 100644 --- a/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx +++ b/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx @@ -1,3 +1,4 @@ +import styles from './artists-column.module.css'; import { ItemDetailListCellProps } from './types'; import { @@ -17,7 +18,10 @@ export const AlbumArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProp artists={song.albumArtists ?? []} linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps} readOnly={!isRowHovered} - rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps} + rootTextProps={{ + ...JOINED_ARTISTS_MUTED_PROPS.rootTextProps, + className: styles.artists, + }} /> ); }; diff --git a/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx b/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx index 62f50d7d1..b6ba1aa49 100644 --- a/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx +++ b/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx @@ -1,3 +1,4 @@ +import styles from './artists-column.module.css'; import { ItemDetailListCellProps } from './types'; import { @@ -17,7 +18,10 @@ export const ArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => artists={song.artists ?? []} linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps} readOnly={!isRowHovered} - rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps} + rootTextProps={{ + ...JOINED_ARTISTS_MUTED_PROPS.rootTextProps, + className: styles.artists, + }} /> ); }; diff --git a/src/renderer/components/item-list/item-detail-list/columns/artists-column.module.css b/src/renderer/components/item-list/item-detail-list/columns/artists-column.module.css new file mode 100644 index 000000000..b3b00d5bc --- /dev/null +++ b/src/renderer/components/item-list/item-detail-list/columns/artists-column.module.css @@ -0,0 +1,10 @@ +.artists { + display: block; + overflow: hidden; + text-overflow: ellipsis; +} + +.artists, +.artists > * { + white-space: nowrap; +} diff --git a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css index a0cc7cfc9..19a3dc81e 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css +++ b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css @@ -59,6 +59,10 @@ a.title { --text-text-wrap: nowrap; } +.artists > * { + white-space: nowrap; +} + .folder-icon { color: black; fill: rgb(255 215 100); diff --git a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx index c2a4d61f1..bc788a348 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx @@ -61,7 +61,12 @@ export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => { artistName={item.albumArtist} artists={item.albumArtists} linkProps={{ fw: 400, isMuted: true }} - rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }} + rootTextProps={{ + className: styles.artists, + fw: 400, + isMuted: true, + size: 'sm', + }} /> @@ -144,7 +149,12 @@ export const QueueSongTitleArtistColumn = (props: ItemTableListInnerColumn) => { artistName={item.artistName} artists={item.artists} linkProps={{ fw: 400, isMuted: true }} - rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }} + rootTextProps={{ + className: styles.artists, + fw: 400, + isMuted: true, + size: 'sm', + }} /> diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css index 4225bd339..61e286efb 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css +++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css @@ -75,6 +75,10 @@ a.title { --text-text-wrap: nowrap; } +.artists > * { + white-space: nowrap; +} + .folder-icon { color: black; fill: rgb(255 215 100); diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx index 42a71da18..de1af207a 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx @@ -165,7 +165,12 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => { artistName={item.albumArtist} artists={item.albumArtists} linkProps={{ fw: 400, isMuted: true }} - rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }} + rootTextProps={{ + className: styles.artists, + fw: 400, + isMuted: true, + size: 'sm', + }} /> @@ -337,7 +342,12 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) => artistName={item.artistName} artists={item.artists} linkProps={{ fw: 400, isMuted: true }} - rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }} + rootTextProps={{ + className: styles.artists, + fw: 400, + isMuted: true, + size: 'sm', + }} /> diff --git a/src/renderer/features/player/components/left-controls.module.css b/src/renderer/features/player/components/left-controls.module.css index 61b42c7ff..1f1ad67c1 100644 --- a/src/renderer/features/player/components/left-controls.module.css +++ b/src/renderer/features/player/components/left-controls.module.css @@ -72,6 +72,17 @@ } } +.joined-artists { + display: block; + overflow: hidden; + text-overflow: ellipsis; +} + +.joined-artists, +.joined-artists > * { + white-space: nowrap; +} + .left-controls-container { display: flex; width: 100%; diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx index d6580366e..d87bea6c7 100644 --- a/src/renderer/features/player/components/left-controls.tsx +++ b/src/renderer/features/player/components/left-controls.tsx @@ -268,6 +268,7 @@ export const LeftControls = () => { }} rootTextProps={{ ...JOINED_ARTISTS_MUTED_PROPS.rootTextProps, + className: styles.joinedArtists, size: 'md', }} />