From 56162b650c74aa4b169ba081344bccb3eb736275 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 23 Nov 2025 15:13:31 -0800
Subject: [PATCH] handle title combined column on compact sizing

---
 .../columns/title-combined-column.module.css   |  8 ++++++--
 .../columns/title-combined-column.tsx          | 18 +++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

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 94fef673e..fd9cd746f 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
@@ -9,10 +9,14 @@
 .text-container {
     display: grid;
     grid-template-rows: 1fr 1fr;
-    gap: 2px;
+    gap: var(--theme-spacing-xs);
     min-width: 0;
 }
 
+.text-container.compact {
+    gap: 0;
+}
+
 .title {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -23,7 +27,7 @@
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 0.875rem;
+    font-size: var(--theme-font-size-xs) !important;
     color: var(--theme-colors-foreground-muted);
     white-space: nowrap;
     user-select: none;
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 cdf166f79..5c241d1cf 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
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { CSSProperties, useMemo } from 'react';
 import { generatePath, Link } from 'react-router';
 
@@ -46,13 +47,13 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
 
         return (
             <TableColumnContainer
-                className={styles['title-combined']}
+                className={styles.titleCombined}
                 containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties}
                 {...props}
             >
                 <Image containerClassName={styles.image} src={row.imageUrl as string} />
-                <div className={styles['text-container']}>
-                    <Text className={styles.title} isNoSelect {...titleLinkProps}>
+                <div className={styles.textContainer}>
+                    <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
                         {row.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -63,6 +64,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                                     isLink
                                     isMuted
                                     isNoSelect
+                                    size="sm"
                                     state={{ item: artist }}
                                     to={artist.path}
                                 >
@@ -122,15 +124,20 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
 
         return (
             <TableColumnContainer
-                className={styles['title-combined']}
+                className={styles.titleCombined}
                 containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties}
                 {...props}
             >
                 <Image containerClassName={styles.image} src={row.imageUrl as string} />
-                <div className={styles['text-container']}>
+                <div
+                    className={clsx(styles.textContainer, {
+                        [styles.compact]: props.size === 'compact',
+                    })}
+                >
                     <Text
                         className={styles.title}
                         isNoSelect
+                        size="md"
                         {...titleLinkProps}
                         style={textStyles}
                     >
@@ -144,6 +151,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                                     isLink
                                     isMuted
                                     isNoSelect
+                                    size="sm"
                                     state={{ item: artist }}
                                     to={artist.path}
                                 >