diff --git a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css index 1e3fac942..a6704d713 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css +++ b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css @@ -15,15 +15,15 @@ } .text-container.align-left { - text-align: left; + justify-items: start; } .text-container.align-center { - text-align: center; + justify-items: center; } .text-container.align-right { - text-align: right; + justify-items: end; } .text-container.compact { @@ -39,8 +39,16 @@ white-space: nowrap; } +a.title { + width: auto; +} + + .artists { display: block; + width: 100%; + min-width: 0; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--theme-font-size-xs) !important; diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css index 8f4060560..ae12b81e4 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css +++ b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css @@ -1,7 +1,6 @@ .name-container { display: -webkit-inline-box; align-self: flex-start; - width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -9,6 +8,10 @@ -webkit-box-orient: vertical; } +a.name-container { + width: auto; +} + .name-container.compact { -webkit-line-clamp: 1; } 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 5f00b7b39..bc0c246e9 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 @@ -13,6 +13,18 @@ min-width: 0; } +.text-container.align-left { + justify-items: start; +} + +.text-container.align-center { + justify-items: center; +} + +.text-container.align-right { + justify-items: end; +} + .text-container.compact { gap: 0; } @@ -26,8 +38,16 @@ white-space: nowrap; } +a.title { + width: auto; +} + + .artists { display: block; + width: 100%; + min-width: 0; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--theme-font-size-xs) !important; 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 488c9a0a9..3be78b199 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 @@ -78,6 +78,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => { if (item && 'name' in item && 'imageUrl' in item && 'artists' in item) { const rowHeight = props.getRowHeight(props.rowIndex, props); const path = getTitlePath(props.itemType, (rowItem as any).id as string); + const align = props.columns[props.columnIndex]?.align || 'start'; const item = rowItem as any; const titleLinkProps = path @@ -130,6 +131,9 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {