From 83caf1b8586a42f699c6458ae84063b435e0b8a8 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 7 Dec 2025 20:15:15 +0100
Subject: [PATCH] fix: Align MVP badge and trophy icon inline with player names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap player name, avatar, and badges in a flex container to ensure
MVP badge and team-top trophy icon appear inline rather than breaking
to a new line.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/routes/match/[id]/+page.svelte | 120 +++++++++++++++--------------
 1 file changed, 62 insertions(+), 58 deletions(-)

diff --git a/src/routes/match/[id]/+page.svelte b/src/routes/match/[id]/+page.svelte
index 50c7e23..7b37690 100644
--- a/src/routes/match/[id]/+page.svelte
+++ b/src/routes/match/[id]/+page.svelte
@@ -158,36 +158,38 @@
 						{#each sortedTeamA as player, index}
 							<tr class="border-b border-white/5 transition-colors hover:bg-neon-blue/5">
 								<td class="px-6 py-3">
-									<a
-										href={`/player/${player.id}`}
-										class="flex items-center gap-3 font-medium text-white transition-colors hover:text-neon-blue"
-									>
-										{#if player.avatar}
-											<img
-												src={player.avatar}
-												alt={player.name}
-												class="h-8 w-8 rounded-full border border-terrorist/30"
-											/>
-										{:else}
-											<div
-												class="flex h-8 w-8 items-center justify-center rounded-full bg-terrorist/20 text-terrorist"
-											>
-												<User class="h-4 w-4" />
-											</div>
-										{/if}
-										<span>{player.name}</span>
-									</a>
-									{#if player.id === mvpPlayerId}
-										<span
-											class="ml-2 inline-flex items-center gap-1 rounded-full bg-neon-gold/20 px-2 py-0.5 text-xs font-medium text-neon-gold"
-											title="Most Violent Player"
+									<div class="flex items-center gap-3">
+										<a
+											href={`/player/${player.id}`}
+											class="flex items-center gap-3 font-medium text-white transition-colors hover:text-neon-blue"
 										>
-											<Zap class="h-3 w-3" />
-											MVP
-										</span>
-									{:else if index === 0}
-										<Trophy class="ml-2 inline h-4 w-4 text-terrorist" />
-									{/if}
+											{#if player.avatar}
+												<img
+													src={player.avatar}
+													alt={player.name}
+													class="h-8 w-8 rounded-full border border-terrorist/30"
+												/>
+											{:else}
+												<div
+													class="flex h-8 w-8 items-center justify-center rounded-full bg-terrorist/20 text-terrorist"
+												>
+													<User class="h-4 w-4" />
+												</div>
+											{/if}
+											<span>{player.name}</span>
+										</a>
+										{#if player.id === mvpPlayerId}
+											<span
+												class="inline-flex items-center gap-1 rounded-full bg-neon-gold/20 px-2 py-0.5 text-xs font-medium text-neon-gold"
+												title="Most Violent Player"
+											>
+												<Zap class="h-3 w-3" />
+												MVP
+											</span>
+										{:else if index === 0}
+											<Trophy class="h-4 w-4 text-terrorist" />
+										{/if}
+									</div>
 								</td>
 								<td class="px-4 py-3 font-mono font-semibold text-white">{player.kills}</td>
 								<td class="px-4 py-3 font-mono text-white/80">{player.deaths}</td>
@@ -240,36 +242,38 @@
 						{#each sortedTeamB as player, index}
 							<tr class="border-b border-white/5 transition-colors hover:bg-neon-blue/5">
 								<td class="px-6 py-3">
-									<a
-										href={`/player/${player.id}`}
-										class="flex items-center gap-3 font-medium text-white transition-colors hover:text-neon-blue"
-									>
-										{#if player.avatar}
-											<img
-												src={player.avatar}
-												alt={player.name}
-												class="h-8 w-8 rounded-full border border-ct/30"
-											/>
-										{:else}
-											<div
-												class="flex h-8 w-8 items-center justify-center rounded-full bg-ct/20 text-ct"
-											>
-												<User class="h-4 w-4" />
-											</div>
-										{/if}
-										<span>{player.name}</span>
-									</a>
-									{#if player.id === mvpPlayerId}
-										<span
-											class="ml-2 inline-flex items-center gap-1 rounded-full bg-neon-gold/20 px-2 py-0.5 text-xs font-medium text-neon-gold"
-											title="Most Violent Player"
+									<div class="flex items-center gap-3">
+										<a
+											href={`/player/${player.id}`}
+											class="flex items-center gap-3 font-medium text-white transition-colors hover:text-neon-blue"
 										>
-											<Zap class="h-3 w-3" />
-											MVP
-										</span>
-									{:else if index === 0}
-										<Trophy class="ml-2 inline h-4 w-4 text-ct" />
-									{/if}
+											{#if player.avatar}
+												<img
+													src={player.avatar}
+													alt={player.name}
+													class="h-8 w-8 rounded-full border border-ct/30"
+												/>
+											{:else}
+												<div
+													class="flex h-8 w-8 items-center justify-center rounded-full bg-ct/20 text-ct"
+												>
+													<User class="h-4 w-4" />
+												</div>
+											{/if}
+											<span>{player.name}</span>
+										</a>
+										{#if player.id === mvpPlayerId}
+											<span
+												class="inline-flex items-center gap-1 rounded-full bg-neon-gold/20 px-2 py-0.5 text-xs font-medium text-neon-gold"
+												title="Most Violent Player"
+											>
+												<Zap class="h-3 w-3" />
+												MVP
+											</span>
+										{:else if index === 0}
+											<Trophy class="h-4 w-4 text-ct" />
+										{/if}
+									</div>
 								</td>
 								<td class="px-4 py-3 font-mono font-semibold text-white">{player.kills}</td>
 								<td class="px-4 py-3 font-mono text-white/80">{player.deaths}</td>