fix title combined column trackSubtitle wrapping instead of truncating

src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css

@@ -34,16 +34,29 @@
 }
 
 .title {
-    display: inline-block;
+    display: block;
     width: 100%;
+    min-width: 0;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    --text-text-wrap: nowrap;
 }
 
 a.title {
-    width: auto;
+    width: 100%;
+    max-width: 100%;
+}
+
+.track-subtitle {
+    font-size: var(--theme-font-size-sm);
+    color: var(--theme-colors-foreground-muted);
+}
+
+.track-subtitle.active {
+    color: inherit;
 }
 
 

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -150,7 +150,13 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                         [styles.compact]: props.size === 'compact',
                     })}
                 >
-                    <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
+                    <Text
+                        className={styles.title}
+                        isNoSelect
+                        size="md"
+                        truncate
+                        {...titleLinkProps}
+                    >
                         <ExplicitIndicator explicitStatus={item?.explicitStatus} />
                         {item.name as string}
                     </Text>
@@ -309,23 +315,21 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                         })}
                         isNoSelect
                         size="md"
+                        truncate
                         {...titleLinkProps}
                     >
                         <ExplicitIndicator explicitStatus={song?.explicitStatus} />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
-                            <Text
+                            <span
-                                className={clsx({
+                                className={clsx(styles.trackSubtitle, {
                                     [styles.active]: isActive,
                                 })}
-                                component="span"
-                                isMuted
-                                size="sm"
                             >
                                 {' ('}
                                 {song.trackSubtitle}
                                 {')'}
-                            </Text>
+                            </span>
                         )}
                     </Text>
                     <div className={styles.artists}>
@@ -370,6 +374,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                     className={styles.title}
                     isNoSelect
                     size="md"
+                    truncate
                     {...titleLinkProps}
                     style={textStyles}
                 >