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>
This commit is contained in:
2026-06-14 19:28:12 +02:00
parent 39985a5c71
commit 050f661e6d
+10 -14
View File
@@ -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>
)
}