fix additional instances of JoinedArtists not truncating

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,
+            }}
         />
     );
 };

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,
+            }}
         />
     );
 };

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;
+}

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);

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',
+                            }}
                         />
                     </div>
                 </div>
@@ -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',
+                            }}
                         />
                     </div>
                 </div>

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);

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',
+                            }}
                         />
                     </div>
                 </div>
@@ -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',
+                            }}
                         />
                     </div>
                 </div>

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%;

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',
                                     }}
                                 />