diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.module.css b/src/renderer/components/item-list/item-detail-list/item-detail.module.css index dba384272..13c085b60 100644 --- a/src/renderer/components/item-list/item-detail-list/item-detail.module.css +++ b/src/renderer/components/item-list/item-detail-list/item-detail.module.css @@ -82,6 +82,11 @@ color: var(--theme-colors-foreground-muted); } +.row .right { + min-width: 0; + overflow: hidden; +} + .row .tracks-table { width: 100%; font-size: var(--theme-font-size-sm); diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx index fed437cfc..48ab4a9c2 100644 --- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx +++ b/src/renderer/components/item-list/item-detail-list/item-detail.tsx @@ -48,6 +48,7 @@ interface ItemDetailListProps { } interface RowData { + columnWidthPercents: number[]; controls?: ItemControls; data: unknown[]; getItem?: (index: number) => unknown; @@ -60,6 +61,7 @@ interface RowData { interface TrackRowProps { columns: ItemTableListColumnConfig[]; + columnWidthPercents: number[]; internalState: ItemListStateActions; isMutatingFavorite: boolean; onFavoriteClick: (song: Song) => void; @@ -74,6 +76,7 @@ const textAlignFromAlign = (align: ItemTableListColumnConfig['align']) => const TrackRow = memo( ({ columns, + columnWidthPercents, internalState, isMutatingFavorite, onFavoriteClick, @@ -184,21 +187,16 @@ const TrackRow = memo( onClick={handleRowClick} ref={dragRef ?? undefined} > - {columns.map((col) => { - const widthStyle = col.autoSize - ? { minWidth: col.width } - : { - maxWidth: col.width, - minWidth: col.width, - width: col.width, - }; + {columns.map((col, colIndex) => { + const percent = columnWidthPercents[colIndex] ?? 0; const style: React.CSSProperties = { fontFamily: col.id === TableColumn.DURATION || col.id === TableColumn.TRACK_NUMBER ? 'monospace' : undefined, + minWidth: 0, textAlign: textAlignFromAlign(col.align), - ...widthStyle, + width: `${percent}%`, }; const CellComponent = getDetailListCellComponent(col.id); const content = ( @@ -236,6 +234,7 @@ type RowContentProps = Omit, 'style'>; const RowContent = memo( ({ + columnWidthPercents, controls, data, getItem, @@ -363,6 +362,7 @@ const RowContent = memo( {songs.map((song, rowIndex) => ( prev.index === next.index && prev.data === next.data && + prev.columnWidthPercents === next.columnWidthPercents && prev.getItem === next.getItem && prev.internalState === next.internalState && prev.isMutatingFavorite === next.isMutatingFavorite && @@ -477,6 +478,14 @@ export const ItemDetailList = ({ }, [tableConfig?.columns]); const trackTableSize = tableConfig?.size ?? 'default'; + const columnWidthPercents = useMemo(() => { + const total = trackColumns.reduce((sum, c) => sum + c.width, 0); + if (total <= 0) { + return trackColumns.map(() => 100 / Math.max(1, trackColumns.length)); + } + return trackColumns.map((c) => (c.width / total) * 100); + }, [trackColumns]); + const handleRowsRendered = useCallback( (range: { startIndex: number; stopIndex: number }) => { if (onRangeChanged) { @@ -503,6 +512,7 @@ export const ItemDetailList = ({ const rowProps = useMemo( () => ({ + columnWidthPercents, controls, data: dataSource, getItem, @@ -514,6 +524,7 @@ export const ItemDetailList = ({ trackTableSize, }), [ + columnWidthPercents, controls, dataSource, getItem, diff --git a/src/renderer/features/albums/components/album-list-infinite-detail.tsx b/src/renderer/features/albums/components/album-list-infinite-detail.tsx index 503824ae2..b0c353763 100644 --- a/src/renderer/features/albums/components/album-list-infinite-detail.tsx +++ b/src/renderer/features/albums/components/album-list-infinite-detail.tsx @@ -32,16 +32,15 @@ export const AlbumListInfiniteDetail = ({ const listQueryFn = api.controller.getAlbumList; - const { dataVersion, getItem, itemCount, loadedItems, onRangeChanged } = - useItemListInfiniteLoader({ - eventKey: ItemListKey.ALBUM, - itemsPerPage, - itemType: LibraryItem.ALBUM, - listCountQuery, - listQueryFn, - query, - serverId, - }); + const { getItem, itemCount, loadedItems, onRangeChanged } = useItemListInfiniteLoader({ + eventKey: ItemListKey.ALBUM, + itemsPerPage, + itemType: LibraryItem.ALBUM, + listCountQuery, + listQueryFn, + query, + serverId, + }); const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({ enabled: saveScrollOffset, @@ -50,7 +49,6 @@ export const AlbumListInfiniteDetail = ({ return (