Apply Tailwind v4 shorthand fixes; narrow eslint disables to real FPs

Auto-fixes from eslint-plugin-better-tailwindcss (enforce-canonical-classes
re-enabled — these are real Tailwind v4 shorthands, not stylistic preferences):

- h-full w-full → size-full
- h-5 w-5 → size-5
- px-2 py-2 → p-2
- text-{sm,xs} leading-relaxed → text-{sm,xs}/relaxed
- -translate-x-1/2 -translate-y-1/2 → -translate-1/2
- data-[disabled]:foo → data-disabled:foo
- break-words → wrap-break-word

Only no-unknown-classes stays disabled — it can't see classes defined in
Svelte <style> blocks (.vs-beam, .vp-freeze, ...).

eslint.config.js

@@ -12,11 +12,9 @@ const tailwindRules = {
 	...eslintPluginBetterTailwindcss.configs.recommended.rules,
 	// Prettier handles physical line wrapping
 	'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
-	// Custom CSS classes in Svelte <style> blocks (vs-beam, mp-marker, vp-freeze, ...)
-	// trip this rule even though they're real classes
-	'better-tailwindcss/no-unknown-classes': 'off',
-	// `h-full w-full` ≠ `size-full` semantically when a parent is asymmetric
-	'better-tailwindcss/enforce-canonical-classes': 'off'
+	// False-positives on classes defined inside Svelte <style> blocks
+	// (`vs-beam`, `vp-freeze`, ...) that the plugin can't see
+	'better-tailwindcss/no-unknown-classes': 'off'
 };
 
 export default [

src/lib/components/grid-tile.svelte

@@ -168,12 +168,12 @@
 		ontimeupdate={onTimeUpdate}
 		onended={onEnded}
 		onprogress={onProgress}
-		class="h-full w-full object-cover"
+		class="size-full object-cover"
 	></video>
 
 	<!-- top-left: player number, colored per slot -->
 	<div
-		class="absolute top-1.5 left-1.5 flex h-6 w-6 items-center justify-center rounded-sm font-mono text-[11px] font-bold text-white/95 shadow-sm ring-1 ring-black/20"
+		class="absolute top-1.5 left-1.5 flex size-6 items-center justify-center rounded-sm font-mono text-[11px] font-bold text-white/95 shadow-sm ring-1 ring-black/20"
 		style="background-color: {color};"
 	>
 		{player}
@@ -181,7 +181,7 @@
 
 	{#if isLeader}
 		<div
-			class="absolute top-1.5 right-1.5 grid h-5 w-5 place-items-center rounded-sm bg-emerald-500/85 text-white shadow-sm ring-1 ring-black/20"
+			class="absolute top-1.5 right-1.5 grid size-5 place-items-center rounded-sm bg-emerald-500/85 text-white shadow-sm ring-1 ring-black/20"
 			aria-label="Audio source"
 			title="Audio source"
 		>
@@ -191,7 +191,7 @@
 
 	{#if !available}
 		<div
-			class="absolute right-1.5 bottom-1.5 grid h-5 w-5 place-items-center rounded-sm bg-rose-500/85 text-white shadow-sm ring-1 ring-black/20"
+			class="absolute right-1.5 bottom-1.5 grid size-5 place-items-center rounded-sm bg-rose-500/85 text-white shadow-sm ring-1 ring-black/20"
 			aria-label="Player is dead"
 			title="Player is dead"
 		>

src/lib/components/map-preview.svelte

@@ -92,17 +92,17 @@
 	style={size === undefined ? undefined : `width: ${size}px; height: ${size}px;`}
 >
 	{#if !map}
-		<Skeleton class="h-full w-full rounded-md" />
+		<Skeleton class="size-full rounded-md" />
 	{:else}
 		<img
 			src={radarUrl(mapName, displayedFloor)}
 			alt="{mapName} radar"
-			class="absolute inset-0 h-full w-full rounded-md opacity-70 select-none"
+			class="absolute inset-0 size-full rounded-md opacity-70 select-none"
 			draggable="false"
 		/>
 		<svg
 			viewBox="0 0 {RADAR_PX} {RADAR_PX}"
-			class="absolute inset-0 h-full w-full"
+			class="absolute inset-0 size-full"
 			aria-label="Player positions on {mapName}"
 		>
 			{#each players as p (p.steamid)}

src/lib/components/perspective-grid.svelte

@@ -137,7 +137,7 @@
 							/>
 							<div class="flex items-center gap-1.5 px-0.5 text-xs">
 								<span
-									class="inline-block h-2 w-2 shrink-0 rounded-full"
+									class="inline-block size-2 shrink-0 rounded-full"
 									style={`background: ${playerColor(player.player)};`}
 								></span>
 								<span class="truncate font-medium">Player {player.player}</span>
@@ -176,7 +176,7 @@
 							/>
 							<div class="flex items-center gap-1.5 px-0.5 text-xs">
 								<span
-									class="inline-block h-2 w-2 shrink-0 rounded-full"
+									class="inline-block size-2 shrink-0 rounded-full"
 									style={`background: ${playerColor(player.player)};`}
 								></span>
 								<span class="truncate font-medium">Player {player.player}</span>

src/lib/components/player-grid.svelte

@@ -87,7 +87,7 @@
 		)}
 	>
 		<span
-			class="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm font-mono text-xs font-bold text-white/95 shadow-sm ring-1 ring-black/20"
+			class="flex size-7 shrink-0 items-center justify-center rounded-sm font-mono text-xs font-bold text-white/95 shadow-sm ring-1 ring-black/20"
 			style="background-color: {playerColor(p.player)};"
 		>
 			{p.player}

src/lib/components/round-list.svelte

@@ -28,9 +28,7 @@
 </script>
 
 <div class="flex h-full min-h-0 flex-col">
-	<div
-		class="border-b px-2 py-2 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase"
-	>
+	<div class="border-b p-2 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase">
 		Rounds <span class="ml-1 text-muted-foreground/50">({rounds.length})</span>
 	</div>
 	<ScrollArea class="min-h-0 flex-1">

src/lib/components/timeline-bar.svelte

@@ -43,7 +43,7 @@
 	aria-disabled={disabled}
 	class={cn(
 		'flex items-center gap-3 rounded-lg border bg-card px-3 py-2 shadow-sm',
-		'data-[disabled]:pointer-events-none data-[disabled]:opacity-60'
+		'data-disabled:pointer-events-none data-disabled:opacity-60'
 	)}
 >
 	<Button

src/lib/components/video-player/playbar.svelte

@@ -128,7 +128,7 @@
 	<div
 		data-dragging={isDragging}
 		class={cn(
-			'absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity',
+			'absolute top-1/2 size-3 -translate-1/2 rounded-full bg-primary opacity-0 transition-opacity',
 			'group-hover/playbar:opacity-100 data-[dragging=true]:opacity-100'
 		)}
 		style:left="{visiblePct}%"

src/lib/components/video-player/video-player.svelte

@@ -289,7 +289,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={containerEl}
-	class="relative h-full w-full overflow-hidden bg-black"
+	class="relative size-full overflow-hidden bg-black"
 	role="region"
 	aria-label="Video player"
 	tabindex="0"
@@ -309,7 +309,7 @@
 		disableremoteplayback
 		controlslist="nodownload nofullscreen noplaybackrate noremoteplayback"
 		oncontextmenu={(e) => e.preventDefault()}
-		class="h-full w-full object-cover"
+		class="size-full object-cover"
 		onloadedmetadata={onLoadedMetadata}
 		onloadeddata={onLoadedData}
 		onplay={onPlay}
@@ -323,7 +323,7 @@
 		bind:this={canvasEl}
 		data-wipe={dissolveFreeze || undefined}
 		class={cn(
-			'vp-freeze pointer-events-none absolute inset-0 z-10 h-full w-full object-contain',
+			'vp-freeze pointer-events-none absolute inset-0 z-10 size-full object-contain',
 			!showFreezeFrame && 'hidden'
 		)}
 		aria-hidden="true"

src/lib/components/video-stage.svelte

@@ -82,7 +82,7 @@
 <div class="overflow-hidden rounded-lg border bg-card shadow-sm">
 	<AspectRatio ratio={16 / 9} class="bg-black">
 		{#if loading}
-			<Skeleton class="h-full w-full rounded-none" />
+			<Skeleton class="size-full rounded-none" />
 			<div class="absolute inset-0 flex items-center justify-center text-muted-foreground">
 				<div class="text-center">
 					<SpinnerIcon size={32} weight="duotone" class="mx-auto mb-2 animate-spin opacity-70" />
@@ -96,7 +96,7 @@
 				<div class="max-w-sm px-6 text-center">
 					<WarningCircleIcon size={32} weight="duotone" class="mx-auto mb-2 text-destructive" />
 					<p class="text-sm font-medium text-foreground">Couldn't load clip</p>
-					<p class="mt-1 text-xs break-words text-muted-foreground">{error}</p>
+					<p class="mt-1 text-xs wrap-break-word text-muted-foreground">{error}</p>
 				</div>
 			</div>
 		{:else if !chunks.length}
@@ -160,7 +160,7 @@
 						style="box-shadow: 0 0 24px {switchPing.color}55;"
 					>
 						<span
-							class="inline-flex h-5 w-5 items-center justify-center rounded-sm font-mono text-[11px] font-bold text-white"
+							class="inline-flex size-5 items-center justify-center rounded-sm font-mono text-[11px] font-bold text-white"
 							style="background-color: {switchPing.color};"
 						>
 							{switchPing.player}

src/routes/+page.svelte

@@ -151,7 +151,7 @@
 			</Button>
 		</div>
 
-		<p class="mt-8 text-sm leading-relaxed text-pretty text-muted-foreground md:text-base">
+		<p class="mt-8 text-sm/relaxed text-pretty text-muted-foreground md:text-base">
 			A rendered dataset of professional Counter Strike 2 matches: every round captured from all ten
 			player POVs, frame-aligned, with spatialized audio, mouse/keyboard inputs, and per-tick world
 			state. Built from HLTV demos, served as parquet shards, and browsable here without downloading
@@ -166,7 +166,7 @@
 		>
 			Motivation
 		</h2>
-		<p class="mx-auto mt-3 max-w-2xl text-center text-sm leading-relaxed text-muted-foreground">
+		<p class="mx-auto mt-3 max-w-2xl text-center text-sm/relaxed text-muted-foreground">
 			Pro CS2 demos are a goldmine of expert sequential decision-making — long horizons, partial
 			observability, dense visual signal, and 5v5 multi-agent dynamics. This dataset turns them into
 			trainable rendered video.
@@ -178,7 +178,7 @@
 					<div class="font-heading text-sm font-semibold tracking-tight">
 						{m.title}
 					</div>
-					<p class="mt-1 text-xs leading-relaxed text-muted-foreground">
+					<p class="mt-1 text-xs/relaxed text-muted-foreground">
 						{m.body}
 					</p>
 				</div>
@@ -199,7 +199,7 @@
 					Video
 				</div>
 				<div class="mt-1 font-heading text-sm font-semibold">1280×720 · 32 fps</div>
-				<p class="mt-1 text-xs leading-relaxed text-muted-foreground">
+				<p class="mt-1 text-xs/relaxed text-muted-foreground">
 					Near-lossless H.264, one stream per player POV. 10 streams per round, all tick-aligned.
 				</p>
 			</div>
@@ -208,7 +208,7 @@
 					Inputs
 				</div>
 				<div class="mt-1 font-heading text-sm font-semibold">Keyboard + mouse</div>
-				<p class="mt-1 text-xs leading-relaxed text-muted-foreground">
+				<p class="mt-1 text-xs/relaxed text-muted-foreground">
 					Per-tick keystrokes, mouse delta, fire/jump/use, weapon switches — the actions a policy
 					has to predict.
 				</p>
@@ -218,7 +218,7 @@
 					World state
 				</div>
 				<div class="mt-1 font-heading text-sm font-semibold">Per-tick game state</div>
-				<p class="mt-1 text-xs leading-relaxed text-muted-foreground">
+				<p class="mt-1 text-xs/relaxed text-muted-foreground">
 					Positions, velocities, camera intrinsics, health, armor, ammo, weapons — for all 10
 					players, every tick.
 				</p>
@@ -228,7 +228,7 @@
 					G-buffers <span class="text-amber-600 dark:text-amber-400">· soon</span>
 				</div>
 				<div class="mt-1 font-heading text-sm font-semibold">Luminance · depth · vertex IDs</div>
-				<p class="mt-1 text-xs leading-relaxed text-muted-foreground">
+				<p class="mt-1 text-xs/relaxed text-muted-foreground">
 					Per-pixel auxiliary channels for self-supervised pretraining and dense prediction heads.
 				</p>
 			</div>
@@ -338,7 +338,7 @@
 			BibTeX
 		</h2>
 		<pre
-			class="mt-3 overflow-x-auto rounded-md border bg-card p-4 text-left font-mono text-xs leading-relaxed text-foreground/90">{`@misc{blanchon2026cs2dataset,
+			class="mt-3 overflow-x-auto rounded-md border bg-card p-4 text-left font-mono text-xs/relaxed text-foreground/90">{`@misc{blanchon2026cs2dataset,
   author       = {Julien Blanchon},
   title        = {Counter Strike 2 Dataset},
   year         = {2026},