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:
@@ -111,7 +111,7 @@ final class LocaleSwitcherTest extends TestCase
|
||||
$img = LocaleSwitcher::flagImg($code);
|
||||
self::assertStringStartsWith('<img', $img);
|
||||
self::assertStringContainsString('class="flag"', $img);
|
||||
self::assertStringContainsString('width="24" height="18"', $img);
|
||||
self::assertStringContainsString('width="32" height="24"', $img);
|
||||
self::assertStringContainsString('alt=""', $img);
|
||||
self::assertStringEndsWith('>', $img);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user