fix: match placeholder badge dimensions to flag-icons flag size

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

@@ -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,21 +22,24 @@ 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}
         </span>
+      </span>
     )
   }