fix: correct details matrix sticky layering and hover states

src/routes/details/+page.svelte

@@ -315,7 +315,7 @@
 	}
 
 	function matrixSortColumnClass(datasetName: string | null) {
-		return matrixSortIsActive(datasetName) && 'bg-muted/80 text-foreground';
+		return matrixSortIsActive(datasetName) && 'bg-muted text-foreground';
 	}
 
 	function metricCellClass(value: number | null, metric: DetailMetric, datasetName: string) {
@@ -336,7 +336,7 @@
 		return cn(
 			metricCellClass(value, metric, datasetName),
 			startsGroup && 'border-l-border',
-			matrixSortIsActive(datasetName) && 'bg-muted/20 text-foreground'
+			matrixSortIsActive(datasetName) && 'bg-muted text-foreground'
 		);
 	}
 
@@ -567,7 +567,7 @@
 						})}
 					</p>
 					<div
-						class="max-h-[88vh] overflow-auto rounded-2xl border bg-card shadow-sm"
+						class="relative isolate max-h-[88vh] overflow-auto rounded-2xl border bg-card shadow-sm"
 						role="region"
 						aria-label={m.benchmarks_description()}
 					>
@@ -666,12 +666,12 @@
 								<tbody>
 									{#each matrixRows as model (modelKey(model))}
 										<tr
-											class="hover:[&>td.matrix-cell-bad]:!bg-red-500/15 hover:[&>td.matrix-cell-empty]:!bg-muted/40 hover:[&>td.matrix-cell-good]:!bg-emerald-500/15 hover:[&>th]:bg-muted"
+											class="details-matrix-row hover:[&>td.matrix-cell-bad]:!bg-red-500/15 hover:[&>td.matrix-cell-empty]:!bg-muted/40 hover:[&>td.matrix-cell-good]:!bg-emerald-500/15"
 										>
 											<th
 												class={cn(
-													'z-20 min-w-80 max-w-80 border-r border-b bg-card px-4 py-3 text-left md:sticky md:left-0',
-													matrixSortIsActive(null) && 'bg-muted/30'
+													'z-10 min-w-80 max-w-80 border-r border-b bg-card px-4 py-3 text-left transition-colors md:sticky md:left-0',
+													matrixSortIsActive(null) && 'bg-muted'
 												)}
 												scope="row"
 											>
@@ -732,12 +732,6 @@
 							</p>
 						{/if}
 					</div>
-
-					<div
-						class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-muted-foreground"
-					>
-						<span>{m.details_matrix_no_data()}</span>
-					</div>
 				</section>
 			{:else}
 				<section
@@ -1554,3 +1548,9 @@
 		{/snippet}
 	</div>
 {/if}
+
+<style>
+	.details-matrix-row:hover > th {
+		background-color: color-mix(in oklch, var(--muted) 84%, var(--foreground) 16%) !important;
+	}
+</style>