feat: Make header more compact on mobile by adjusting layout and link…

[thortve]

Make the header more compact on mobile

Closes #182

Why

After #162, phones still showed the header on two rows: the logo, then "Report a sighting" with the theme switch. That's about 102 px before the page starts, which pushes the first search result down.

Viewport	Header before	Header after	Search box starts
320–480 px	102 px, two rows	53 px, one row	at 77 px instead of about 126
Wider than 480 px	One row	Unchanged	Unchanged

What changed

Banner.tsx and Banner.css. Up to 480 px:

• Shorter visible label: the link shows "Report". The words "a sighting" are visually hidden but still in the link, so its accessible name stays "Report a sighting". That meets WCAG 2.5.3 (Label in Name), because the visible word starts the name. It's still the filled green button, so it still reads as the main action.
• Smaller sizes: a slightly smaller logo and wordmark, less padding on the link, smaller gaps, and switch icons of 28 px instead of 34. 28 px stays above the 24 × 24 px tap-target minimum (WCAG 2.5.8).
• One variable for the switch size: --theme-icon controls the icon size, so the thumb's size and slide distance follow it instead of repeating 34px.
• Wrapping kept as a safety net: at 320 px the row uses 275 of 288 px. With a wider font or larger system text, the header wraps instead of sticking out sideways. I checked this at about 130% text size.
• The space stays outside the hidden part. With the space at the start of the hidden span, jsdom calculated the name as "Reporta sighting". Chrome got it right, but browsers and screen readers can differ.
• Removed: the two-row layout from Refine the header and theme switch at narrow widths #162. Above 480 px nothing changes, and the smaller logo still keeps 481–520 px on one row.

Tests

• e2e/header.spec.ts is updated. At 320 px, in light and dark mode, it checks that:
  • the header is one row and the page doesn't scroll sideways;
  • the link's name is still "Report a sighting" while only "Report" shows;
  • Tab moves logo → Report → switch.
• It also checks that the header is one row at 375, 480, 481 and 520 px.
• The existing axe checks (mobile and desktop, both themes) and the 320 px no-sideways-scroll check pass.
• 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 at 320 and 375 px.
2. Check that the logo, "Report" and the theme switch are on one row and nothing sticks out.
3. Tab through the header and check the order and the focus outlines.
4. With a screen reader, or in DevTools under Accessibility, check that the link is named "Report a sighting".
5. Check 481 px and desktop: the header should show the full "Report a sighting" as before.
6. Repeat in dark mode.