From 2e053a6388421ce89bc294332c1544a8b4ecdf25 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Wed, 12 Nov 2025 23:43:39 +0100
Subject: [PATCH] fix: Constrain rank icon size and table row height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set Rating column table cells to fixed height (h-12 = 48px)
- Wrap icons in flex container for vertical centering
- Reduce icon size from 14x14 to 11x11 to fit within row height
- Add max-h-11 constraint to prevent overflow
- Add inline-block and align-middle to icon for proper alignment

This ensures all table rows remain the same height regardless of
whether they show rank icons or Premier rating badges.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/ui/RankIcon.svelte | 11 +++++---
 src/routes/match/[id]/+page.svelte    | 36 +++++++++++++++------------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/ui/RankIcon.svelte b/src/lib/components/ui/RankIcon.svelte
index 11cd576..3cb5bd9 100644
--- a/src/lib/components/ui/RankIcon.svelte
+++ b/src/lib/components/ui/RankIcon.svelte
@@ -37,7 +37,7 @@
 	};
 
 	const sizeClasses = {
-		sm: 'h-14 w-14',
+		sm: 'h-11 w-11 max-h-11',
 		md: 'h-16 w-16',
 		lg: 'h-20 w-20'
 	};
@@ -61,9 +61,14 @@
 
 {#if showLabel}
 	<div class="inline-flex items-center gap-2 {className}">
-		<img src={iconPath} alt={rankName} class={sizeClasses[size]} />
+		<img src={iconPath} alt={rankName} class="{sizeClasses[size]} object-contain" />
 		<span class="font-medium {labelSizeClasses[size]}">{rankName}</span>
 	</div>
 {:else}
-	<img src={iconPath} alt={rankName} title={rankName} class={`${sizeClasses[size]} ${className}`} />
+	<img
+		src={iconPath}
+		alt={rankName}
+		title={rankName}
+		class="{sizeClasses[size]} {className} inline-block object-contain align-middle"
+	/>
 {/if}
diff --git a/src/routes/match/[id]/+page.svelte b/src/routes/match/[id]/+page.svelte
index 9d190cb..9a4ef73 100644
--- a/src/routes/match/[id]/+page.svelte
+++ b/src/routes/match/[id]/+page.svelte
@@ -162,14 +162,16 @@
 								<td class="font-mono">{(player.adr || 0).toFixed(1)}</td>
 								<td class="font-mono">{(player.hs_percent || 0).toFixed(1)}%</td>
 								<td class="font-mono">{player.kast?.toFixed(1) || '0.0'}%</td>
-								<td>
-									<PremierRatingBadge
-										rating={player.rank_new}
-										oldRating={player.rank_old}
-										size="sm"
-										showChange={true}
-										showIcon={false}
-									/>
+								<td class="h-12">
+									<div class="flex h-full items-center">
+										<PremierRatingBadge
+											rating={player.rank_new}
+											oldRating={player.rank_old}
+											size="sm"
+											showChange={true}
+											showIcon={false}
+										/>
+									</div>
 								</td>
 							</tr>
 						{/each}
@@ -217,14 +219,16 @@
 								<td class="font-mono">{(player.adr || 0).toFixed(1)}</td>
 								<td class="font-mono">{(player.hs_percent || 0).toFixed(1)}%</td>
 								<td class="font-mono">{player.kast?.toFixed(1) || '0.0'}%</td>
-								<td>
-									<PremierRatingBadge
-										rating={player.rank_new}
-										oldRating={player.rank_old}
-										size="sm"
-										showChange={true}
-										showIcon={false}
-									/>
+								<td class="h-12">
+									<div class="flex h-full items-center">
+										<PremierRatingBadge
+											rating={player.rank_new}
+											oldRating={player.rank_old}
+											size="sm"
+											showChange={true}
+											showIcon={false}
+										/>
+									</div>
 								</td>
 							</tr>
 						{/each}