handle title combined column on compact sizing

This commit is contained in:
jeffvli
2025-11-23 15:13:31 -08:00
parent af7e52295a
commit 56162b650c
2 changed files with 19 additions and 7 deletions
@@ -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;
@@ -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}
>