From 050f661e6d01cc7764637b2f9e1c635230281a1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 19:28:12 +0200
Subject: [PATCH] fix: match placeholder badge dimensions to flag-icons flag
 size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Setting fontSize on the container element caused em-based width/height to
collapse relative to the shrunken font size. Move font-size to an inner
span so the outer container stays at 1.33em × 1em — matching .fi dimensions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/team-flag.tsx | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/components/team-flag.tsx b/components/team-flag.tsx
index a0ea302..ca34c44 100644
--- a/components/team-flag.tsx
+++ b/components/team-flag.tsx
@@ -9,13 +9,6 @@ interface Props {
 
 const sizes = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl', xl: 'text-[60px]' }
 
-const placeholderSize = {
-  sm:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-  md:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-  lg:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-  xl:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-}
-
 export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
   // If the name is in our registry, trust it over the DB value (which may be stale).
   // For unknown teams, fall back to the DB iso2.
@@ -29,20 +22,23 @@ export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
       .slice(0, 3)
       .toUpperCase()
     return (
+      // Outer span matches flag-icons dimensions: width=1.33em, height=1em relative
+      // to the Tailwind font-size class. fontSize must NOT be set here or em shrinks.
       <span
         className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
-        style={{
-          ...placeholderSize[size],
-          background: 'rgba(42,92,53,0.35)',
+        style={{ width: '1.33em', height: '1em', background: 'rgba(42,92,53,0.35)' }}
+        title={name}
+      >
+        <span style={{
+          fontSize: '0.38em',
           color: '#6abf7a',
           fontFamily: 'Space Grotesk, sans-serif',
           fontWeight: 700,
           letterSpacing: '0.04em',
           lineHeight: 1,
-        }}
-        title={name}
-      >
-        {abbr}
+        }}>
+          {abbr}
+        </span>
       </span>
     )
   }