ducoterra
dbf2af26c6
Standardize on the .agents/ directory (shared with project skills): phases/, user_stories/, reports/, screenshots/, validate.sh, and phase-sessions/ + pipeline.log all move to .agents/ (git mv preserves history; runtime artifacts move alongside). Updates every reference in AGENTS.md, README.md, .gitignore, app docstrings, and test story headers. Historical KB content in data/ and the runtime pipeline.log transcript are left untouched.
39 lines
1.7 KiB
Markdown
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).
|