158 polish visual consistency and mobile browsing

[thortve]

Polish visual consistency and mobile browsing

Closes #158

Summary

This acts on peer feedback about inconsistent formatting between the search, report and detail pages, and about the search page being hard to use on small screens. The brand, color palette and overall layout stay as they were. The changes reuse the existing color tokens and component styles.

Each sub-issue was reviewed and merged into 158-polish-visual-consistency-and-mobile-browsing in its own PR. This PR adds nothing new.

Sub-issue	PR	Change
#159 Show country names consistently	#178	Country names instead of codes everywhere
#160 Align back links across pages	#180	One shared back link on the detail and submit pages
#161 Compact search on mobile	#181	Filters behind a toggle and no list maps on phones
#162 Refine the header at narrow widths	#183	Header aligned at narrow widths
#182 Compact header on mobile	#184	Header on one row on phones

Visual consistency

• Country names: the filter showed "Norway" but the results showed "NO". Now one formatter (formatCountry) is used for the filter, the chips, the list, the map labels, the detail heading and the page title. A code that isn't a country shows as-is in capitals, and a missing country shows "Unknown country".
• Back links: the detail page had a pill and the submit page had a plain underlined link. Both now use one BackLink component with the same shape, arrow and spacing in both themes.

Mobile browsing

• Filters: below 640 px the four filter fields are behind a "Filters" button with aria-expanded. The active filters stay visible as chips. If the fields are hidden when a filter is removed, focus moves to the button.
• Results: below 480 px the list shows no maps, so phones load no map tiles for it. Each card keeps the location, date, shape, duration, report and detail link, and the detail page still has the map.
• Header: up to 480 px it fits on one row. The link shows "Report", and its accessible name is still "Report a sighting". With larger text it wraps instead of sticking out sideways.

On a phone	Before	After
Header height	102 px	53 px
First result at 320 px	708 px down	about 360 px down
First result at 375 px	685 px down	about 340 px down
Map tiles loaded by the list	Yes	None below 480 px

Desktop looks the same as before.

Accessibility

• Every new control works with the keyboard and has a visible focus outline.
• The Tab order matches what you see.
• Text that is only visually hidden keeps the full accessible names.
• Tap targets stay at least 24 × 24 px.
• The axe checks pass on mobile and desktop in light and dark mode, and so does the 320 px no-sideways-scroll check (WCAG 1.4.10).

Tests

• New unit tests: BackLink.test.tsx, formatCountry (known, unknown and missing codes), and the Filters toggle and its focus handling.
• New e2e tests: mobile-search.spec.ts and header.spec.ts, both at phone width.
• Updated tests: the existing tests now expect country names instead of codes.
• Lint, format check, build, unit, backend and e2e tests passed on every sub-issue PR. The branch is up to date with main and merges cleanly. CI runs everything again here.

How to check

1. npm run dev, then open DevTools device mode at 320 and 375 px, in light and dark mode.
2. Header: one row, and nothing sticks out.
3. Search: the first result shows without scrolling. Open "Filters", pick a country, then close it. The chip should stay, and removing it should move focus to "Filters".
4. Results and detail: locations end with country names, and the back links on the detail and submit pages match.
5. Desktop: the layout is the same as before.

[asgeija]

Looks good mate, well done. ready to merge