fix title columns link width

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;

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;
 }

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;

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) => {
                 </div>
                 <div
                     className={clsx(styles.textContainer, {
+                        [styles.alignCenter]: align === 'center',
+                        [styles.alignLeft]: align === 'start',
+                        [styles.alignRight]: align === 'end',
                         [styles.compact]: props.size === 'compact',
                     })}
                 >
@@ -212,6 +216,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
     if (row && 'name' in row && 'imageUrl' in row && 'artists' in row) {
         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;
 
@@ -267,6 +272,9 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 <div
                     className={clsx(styles.textContainer, {
                         [styles.active]: isActive,
+                        [styles.alignCenter]: align === 'center',
+                        [styles.alignLeft]: align === 'start',
+                        [styles.alignRight]: align === 'end',
                         [styles.compact]: props.size === 'compact',
                     })}
                 >