162 refine the header and theme switch at narrow widths

[thortve]

Refine the header and theme switch at narrow widths

Closes #162

Why

On narrow screens "Report a sighting" wrapped under the logo, and the theme switch floated between the two rows, lined up with neither. At 481–488 px the full-size logo made the row too wide, so the header wrapped into that same misaligned layout.

What changed

Only frontend/src/components/Banner.css. The markup is unchanged.

Up to 480 px:

• Row 1 is the logo. Row 2 has "Report a sighting" and the theme switch.
• The link fills the space next to the switch, and both are 42 px tall.
• Both rows line up with the page edges and with the search box below.
• The Tab order (logo, link, switch) follows the rows.

481–520 px: the smaller logo now starts below 520 px instead of 480. The full-size logo, the link and the switch need about 490 px, so the header stays on one row instead of wrapping on its own.

Above 520 px: unchanged.

Width	Before	After
320–480 px	Two rows, switch between them	Logo row, then link and switch in one row
481–488 px	Wrapped the same misaligned way	One row (smaller logo)
489 px and wider	One row	One row

Nothing scrolls sideways at any width from 320 px. At exactly 480 px the header now has two rows instead of one, because it uses the existing 480 px breakpoint. One row only fits with about 25 px to spare there.

Tests

• New e2e/header.spec.ts:
  • at 320 px, in light and dark mode, the link and the switch share a row at the same height, the rows line up, the page doesn't scroll sideways, and Tab moves logo → link → switch;
  • at 481 and 520 px the header stays on one row.
• The existing axe checks pass on mobile and desktop in both themes, and so does the 320 px no-sideways-scroll check.
• npm run lint, npm run format:check, npm run build, npm run test and npm run test:e2e all pass.

How to check

1. npm run dev, then open DevTools device mode.
2. At 320 and 375 px, check that the link and the theme switch sit side by side under the logo, the same height, with nothing sticking out.
3. At 481–520 px and on desktop, check that the header is one row.
4. Tab through the header and check the order and the focus outlines.
5. Repeat in dark mode.