fix: Column spaceing and selection

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

@@ -1,21 +1,42 @@
 <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>
+					<th class="collapsing" id="checkboxColumn">
+						<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
+					</th>
+					<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
+						Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
+						Artist
+						<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
+						Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
+						Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
+						Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
+						Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
+						Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+					<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer">Difficulty</th>
+					<th *ngIf="hasColumn('uploaded')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('modifiedTime')">
+						Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+					</th>
+				</tr>
 			</thead>
 			<tbody>
 				<tr
@@ -30,37 +51,3 @@
 		</table>
 	</cdk-virtual-scroll-viewport>
 </div>
-
-<ng-template #headerTemplate>
-	<tr>
-		<th class="collapsing" id="checkboxColumn">
-			<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
-		</th>
-		<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
-			Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
-			Artist
-			<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
-			Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
-			Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
-			Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
-			Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
-			Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-		<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer">Difficulty</th>
-		<th *ngIf="hasColumn('uploaded')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('modifiedTime')">
-			Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
-		</th>
-	</tr>
-</ng-template>

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