Files
ducoterra dbf2af26c6 refactor(agents): migrate .agent/ planning tree to .agents/
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.
2026-09-05 10:57:07 -04:00

1.7 KiB

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