# Test — Browser Support & Responsive Variants

**Task**: AZ-469_test_browser_support_responsive
**Name**: Browser-support smoke (Chromium + Firefox) + responsive variants (mobile + desktop)
**Description**: Implement the 3 blackbox tests pinning the cross-browser smoke (AC-18: Chromium + Firefox latest 2) and the responsive bottom-nav / top-bar variants at 480 px / 1024 px breakpoints.
**Complexity**: 2 points
**Dependencies**: AZ-456_test_infrastructure
**Component**: 10_app-shell (Header / nav) (Blackbox Tests)
**Tracker**: AZ-469
**Epic**: AZ-455

## Problem

Browser-support and responsive defects are class-of-bug regressions: they don't surface in dev unless the dev runs both browsers at both breakpoints. CI-pinned smoke catches them at commit time.

## Outcome

- 3 scenarios pass; Chromium + Firefox Playwright projects each execute every e2e scenario in this task.

## Scope

### Included

| Scenario | Profile | Source file |
|----------|---------|-------------|
| FT-P-34 — browser-support smoke (Chromium + Firefox) | e2e | blackbox-tests.md |
| FT-P-35 — mobile bottom-nav variant at 480 px | fast (RTL viewport) + e2e | blackbox-tests.md |
| FT-P-36 — desktop top-bar variant at 1024 px | fast + e2e | blackbox-tests.md |

### Excluded

- Per-page layout (covered by each page's tests).
- Tablet / non-target breakpoints (no AC).

## Acceptance Criteria

**AC-1: Cross-browser**
FT-P-34 navigates to `/flights`, `/annotations`, `/dataset` in both Chromium and Firefox; asserts core elements render in both.

**AC-2: Mobile variant**
At viewport 480×800 the bottom-nav is rendered; the desktop top-bar is hidden.

**AC-3: Desktop variant**
At viewport 1024×768 the top-bar is rendered; the bottom-nav is hidden.

## System Under Test Boundary

- System under test: app shell + responsive header / nav components.
- Allowed stubs: standard MSW handlers.
- Disallowed: stubbing media-query matchers or reading internal React state for layout.
- Expected observables per `results_report.md` rows 60-62.

## Constraints

- Playwright config defines two browser projects (Chromium, Firefox); this task does NOT introduce a third browser.
- Viewport assertion uses `page.setViewportSize()` in e2e and `matchMedia` polyfill + viewport mock in fast.
