# Story: One Header, Same Size Everywhere

**Phase:** `12_header_consistency.md` · **E2E:** `tests/e2e/test_header_consistency.py`

## Narrative

As **a user**, I want the top bar to be the **same height on every page**
so moving between Chat, Sources, and a document never feels like the
app "grew".

Today the document viewer (the page whose back button says "Sources")
uses a content-sized header (≈66px desktop / ≈63px+ mobile) while Chat
and Sources use the fixed 64px bar (58px mobile) — the perceived
"header changes size between sources and chat".

- **Given** any of the three pages at any viewport
- **When** I look at the sticky top bar
- **Then** it is exactly `var(--header-h)` tall on all of them.

## Acceptance criteria
1. `.doc-header` is exactly `var(--header-h)` tall (64px desktop,
   58px ≤640px) — same box as `.app-header` on `/` and `/sources.html`.
2. Title + meta still fit: title stays single-line (ellipsis), meta row
   clips instead of growing the header on narrow screens.
3. Existing phase-10 viewer behavior (back link, title, meta badges,
   a11y frame) unchanged.
4. Unit + integration green, `app/` coverage >90%, story E2E green in
   isolation, one `--no-gpg-sign` commit.

## Playwright Mapping Rule
**Test Scenario → `tests/e2e/test_header_consistency.py`**:
1. `test_header_height_identical_across_pages_desktop` — measured
   bounding boxes of `.app-header` (chat), `.app-header` (sources),
   `.doc-header` (viewer) are all exactly 64px tall.
2. `test_header_height_identical_across_pages_mobile` — same at a 375px
   viewport: all exactly 58px.
3. `test_viewer_header_content_still_fits` — title ellipsizes, meta row
   visible, back link + badges present (regression guard for phase 10).