fix: Constrain rank icon size and table row height

- 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

@@ -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}