fix(locale-switcher): make flag the visual anchor (32x24, no border, no lazy load)
Martin feedback round 3: dropdown still looked 'fuerchterlich' even with the official flag-icons. Root cause: 14px vertical padding around an 18px-tall flag meant the flag occupied only 39% of the trigger height and was dwarfed by whitespace. Plus a 1px black box-shadow border made flags look 'boxy', and loading='lazy' caused empty boxes on the four menu flags the moment the <details> opened. Changes: - Flag size 24x18 -> 32x24 (+78% area, ~4:3 matches flag-icons) - Trigger padding 14px 8px -> 6px (flag now 73% of trigger width, 55% of trigger height, was 46%/39%) - Drop the artificial 1px black box-shadow outline on flags - Drop border-radius on flags (real flag-icons look better as crisp rectangles) - Drop object-fit: cover (no longer needed for SVG) - Drop loading='lazy' and decoding='async' (4 small SVGs, must be ready the moment <details> opens, not flash empty boxes) - min-height: 44px restored on trigger for WCAG 2.5.5 touch target - Menu border-radius 8 -> 10px, padding tightened, font-size 0.85 -> 0.9rem for label legibility - Two-layer box-shadow on menu for subtle elevation
This commit is contained in:
@@ -110,7 +110,11 @@ final class LocaleSwitcher
|
||||
public static function flagImg(string $locale): string
|
||||
{
|
||||
$src = self::flagSource($locale);
|
||||
return '<img class="flag" src="' . $src . '" alt="" width="24" height="18" loading="lazy" decoding="async">';
|
||||
// 32×24 = ~4:3, large enough that the flag is the visual
|
||||
// anchor of the option. No loading="lazy" — these are 4
|
||||
// small SVGs that must be ready the moment the <details>
|
||||
// opens (lazy would cause a flash of empty boxes).
|
||||
return '<img class="flag" src="' . $src . '" alt="" width="32" height="24">';
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user