Files
brain-of-reese/.agent/user_stories/header-consistency.md
T
ducoterra 4971e2859d
Build and Push Containers / build-and-push-app (push) Successful in 12s
Build and Push Containers / build-and-push-db (push) Successful in 10s
chore(agent): track .agent/ planning tree in git
Remove the blanket .agent/ gitignore so the phase roadmap, user
stories, reports, and PLAN.md are versioned with the code. Only
runtime artifacts (.agent/phase-sessions/, .agent/pipeline.log)
remain ignored. Update AGENTS.md git protocol rule to match.
2026-09-01 10:18:22 -04:00

39 lines
1.7 KiB
Markdown

# 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).