fix: Column spaceing and selection

src-angular/app/components/browse/result-table/result-table.component.html

@@ -1,38 +1,12 @@
 <div class="flex-1 flex flex-col overflow-hidden">
-	<div class="flex-shrink-0">
-		<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable" style="table-layout: fixed">
-			<thead class="bg-base-100">
-				<ng-container *ngTemplateOutlet="headerTemplate; context: { isVisible: true }"></ng-container>
-			</thead>
-		</table>
-	</div>
-
 	<cdk-virtual-scroll-viewport
 		#viewport
 		class="flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full"
 		[itemSize]="tableRowHeight"
 		(scroll)="onViewportScroll()">
-		<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable" style="table-layout: fixed">
+		<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable">
-			<!-- Invisible header for column alignment -->
+			<thead>
-			<thead class="invisible absolute opacity-0" style="height: 0; overflow: hidden">
+				<tr [style.top]="tableHeaderPosition" class="sticky top-0 bg-base-100 z-10">
-				<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-			</thead>
-			<tbody>
-				<tr
-					*cdkVirtualFor="let song of songs; trackBy: trackByFn"
-					app-result-table-row
-					(click)="onRowClicked(song)"
-					(rowFocused)="onRowClicked(song)"
-					[class.!bg-neutral]="activeSong === song"
-					[class.!text-neutral-content]="activeSong === song"
-					[song]="song"></tr>
-			</tbody>
-		</table>
-	</cdk-virtual-scroll-viewport>
-</div>
-
-<ng-template #headerTemplate>
-	<tr>
 					<th class="collapsing" id="checkboxColumn">
 						<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
 					</th>
@@ -63,4 +37,17 @@
 						Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
 					</th>
 				</tr>
-</ng-template>
+			</thead>
+			<tbody>
+				<tr
+					*cdkVirtualFor="let song of songs; trackBy: trackByFn"
+					app-result-table-row
+					(click)="onRowClicked(song)"
+					(rowFocused)="onRowClicked(song)"
+					[class.!bg-neutral]="activeSong === song"
+					[class.!text-neutral-content]="activeSong === song"
+					[song]="song"></tr>
+			</tbody>
+		</table>
+	</cdk-virtual-scroll-viewport>
+</div>

src-angular/app/components/browse/result-table/result-table.component.ts

@@ -119,6 +119,15 @@ export class ResultTableComponent implements OnInit, OnDestroy {
 		}
 	}
 
+	public get tableHeaderPosition(): string {
+		if (!this.viewport) {
+			return '-0px'
+		}
+		const offset = this.viewport.getOffsetToRenderedContentStart()
+
+		return `-${offset}px`
+	}
+
 	@HostListener('window:resize', ['$event'])
 	onResize() {
 		if (this.viewport) {

src-angular/app/core/services/selection.service.ts

@@ -12,7 +12,7 @@ export class SelectionService {
 
 	public selections: { [groupId: number]: boolean | undefined } = {}
 
-	constructor(searchService: SearchService) {
+	constructor(private searchService: SearchService) {
 		searchService.newSearch.subscribe(() => {
 			this.selections = {}
 			this.deselectAll()
@@ -33,8 +33,8 @@ export class SelectionService {
 
 	selectAll() {
 		this.allSelected = true
-		for (const groupId in this.selections) {
+		for (const song of this.searchService.groupedSongs) {
-			this.selections[groupId] = true
+			this.selections[song[0].groupId] = true
 		}
 		this.selectAllChangedEmitter.emit(true)
 	}