From 848dc95e77d8246d03850ded7092ab1fe7258418 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 7 Dec 2025 20:27:20 +0100
Subject: [PATCH] fix: Improve match header UX and remove excessive page
 whitespace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Shorten date format in match header (remove year)
- Change meta cards from grid to flex for better alignment
- Disable demo download for matches older than 4 weeks (Valve retention limit)
- Fix avg_rank card to only show valid CS Ratings (>1000)
- Remove min-h-screen from 8 pages to eliminate footer gap

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/routes/+error.svelte             |  2 +-
 src/routes/about/+page.svelte        |  2 +-
 src/routes/faq/+page.svelte          |  2 +-
 src/routes/match/[id]/+layout.svelte | 39 +++++++++++++++++++---------
 src/routes/matches/+page.svelte      |  2 +-
 src/routes/players/+page.svelte      |  2 +-
 src/routes/privacy/+page.svelte      |  2 +-
 src/routes/terms/+page.svelte        |  2 +-
 8 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 88e4f91..7b84c2d 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -64,7 +64,7 @@
 	<title>{status} - {getErrorTitle(status)} | teamflash.rip</title>
 </svelte:head>
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative Background -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden">
 		<!-- Blur orbs -->
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 02c887f..088fd2e 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -6,7 +6,7 @@
 	<title>About - teamflash.rip</title>
 </svelte:head>
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative Background -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden">
 		<!-- Blur orbs -->
diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
index 43702c5..d9eb8b9 100644
--- a/src/routes/faq/+page.svelte
+++ b/src/routes/faq/+page.svelte
@@ -108,7 +108,7 @@
 	/>
 </svelte:head>
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative Background -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden">
 		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>
diff --git a/src/routes/match/[id]/+layout.svelte b/src/routes/match/[id]/+layout.svelte
index 1dfe61c..5382ed7 100644
--- a/src/routes/match/[id]/+layout.svelte
+++ b/src/routes/match/[id]/+layout.svelte
@@ -33,9 +33,13 @@
 		{ label: 'Chat', href: `/match/${match.match_id}/chat` }
 	];
 
-	const formattedDate = new Date(match.date).toLocaleString('en-US', {
-		dateStyle: 'medium',
-		timeStyle: 'short'
+	// Shorter date format: "Sep 5, 4:30 PM" (no year - saves space in card)
+	const matchDate = new Date(match.date);
+	const formattedDate = matchDate.toLocaleString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit'
 	});
 
 	const duration = match.duration
@@ -45,6 +49,10 @@
 	const mapName = formatMapName(match.map);
 	const mapBg = getMapBackground(match.map);
 
+	// Check if match is older than 4 weeks (Valve deletes demos after ~4 weeks)
+	const fourWeeksMs = 4 * 7 * 24 * 60 * 60 * 1000;
+	const isMatchOlderThanFourWeeks = Date.now() - matchDate.getTime() > fourWeeksMs;
+
 	function handleImageError(event: Event) {
 		const img = event.target as HTMLImageElement;
 		img.src = '/images/map_screenshots/default.webp';
@@ -65,8 +73,9 @@
 		window.location.href = downloadUrl;
 	}
 
-	// Check if demo download is available
-	const canDownloadDemo = match.replay_url || (match.demo_parsed && match.share_code);
+	// Demo download: always available if replay_url exists, otherwise only for recent matches
+	const canDownloadDemo =
+		match.replay_url || (match.demo_parsed && match.share_code && !isMatchOlderThanFourWeeks);
 </script>
 
 <!-- Match Header with Background -->
@@ -158,12 +167,12 @@
 				</div>
 			</div>
 
-			<!-- Match Meta Grid -->
-			<div class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6">
+			<!-- Match Meta Cards - Flex layout handles varying item counts gracefully -->
+			<div class="mt-4 flex flex-wrap justify-center gap-2">
 				<!-- Date -->
 				<div class="flex items-center gap-2 rounded-lg border border-white/5 bg-white/5 px-3 py-2">
 					<Calendar class="h-4 w-4 shrink-0 text-neon-blue" />
-					<span class="truncate text-xs text-white/70">{formattedDate}</span>
+					<span class="text-xs text-white/70">{formattedDate}</span>
 				</div>
 
 				<!-- Duration -->
@@ -188,13 +197,19 @@
 					</div>
 				{/if}
 
-				<!-- Avg Rating -->
-				{#if match.avg_rank && match.avg_rank > 0}
+				<!-- Avg Rating - Only show for valid CS Ratings (Premier mode, >1000) -->
+				{#if match.avg_rank && match.avg_rank > 1000}
 					<div
 						class="flex items-center gap-2 rounded-lg border border-white/5 bg-white/5 px-3 py-2"
 					>
 						<Users class="h-4 w-4 shrink-0 text-neon-blue" />
-						<PremierRatingBadge rating={match.avg_rank} size="sm" showTier={false} />
+						<PremierRatingBadge
+							rating={match.avg_rank}
+							{match}
+							size="sm"
+							showTier={false}
+							showIcon={false}
+						/>
 					</div>
 				{/if}
 
@@ -218,7 +233,7 @@
 </div>
 
 <!-- Tab Content -->
-<div class="min-h-screen bg-void">
+<div class="bg-void">
 	<div class="container mx-auto px-4 py-8">
 		{@render children()}
 	</div>
diff --git a/src/routes/matches/+page.svelte b/src/routes/matches/+page.svelte
index 8bacb1a..a6d21dc 100644
--- a/src/routes/matches/+page.svelte
+++ b/src/routes/matches/+page.svelte
@@ -478,7 +478,7 @@
 	</div>
 {/if}
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative background elements -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
 		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>
diff --git a/src/routes/players/+page.svelte b/src/routes/players/+page.svelte
index 29765cd..c10c0f1 100644
--- a/src/routes/players/+page.svelte
+++ b/src/routes/players/+page.svelte
@@ -6,7 +6,7 @@
 	<title>Players - teamflash.rip</title>
 </svelte:head>
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative Background -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden">
 		<!-- Blur orbs -->
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
index fc5ad1e..741fd0b 100644
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -16,7 +16,7 @@
 	/>
 </svelte:head>
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative Background -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden">
 		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>
diff --git a/src/routes/terms/+page.svelte b/src/routes/terms/+page.svelte
index f783b85..63e758f 100644
--- a/src/routes/terms/+page.svelte
+++ b/src/routes/terms/+page.svelte
@@ -16,7 +16,7 @@
 	/>
 </svelte:head>
 
-<div class="relative min-h-screen bg-void">
+<div class="relative bg-void">
 	<!-- Decorative Background -->
 	<div class="pointer-events-none absolute inset-0 overflow-hidden">
 		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>