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

2.2 KiB

Phase 12 — One Header, Same Size Everywhere

Story: .agents/user_stories/header-consistency.md Context: owner report 2026-08-22 — "the header changes size between sources and chat."

Goal

The sticky top bar is the same height on every page: Chat, Sources, and the document viewer (the page whose back button says "Sources" — the one users compare against chat).

Diagnosis (measured 2026-08-22, headless Chromium)

  • Desktop: .app-header = 64px on / and /sources.html (identical markup/CSS); .doc-header = 66.375px (content-sized: padding-block: 0.7rem around a 44px back pill + 2-line title block).
  • Mobile (≤640px): app header 58px; .doc-header = 63.19px (and grows further when the title/meta wrap). So the "sources header" (viewer back button = "Sources") is visibly taller than the chat header — on desktop and mobile.

Implementation steps

  1. CSS (frontend/assets/styles.css):
    • .doc-header { height: var(--header-h); } — same fixed box as .app-header.
    • .doc-header-inner { height: 100%; padding-block: 0; } (center vertically; the 44px pill + title/meta block fit in 64/58px).
    • Mobile: replace the wrapping rule with flex-wrap: nowrap; .doc-meta { flex-wrap: nowrap; overflow: hidden; } so the meta row clips (path already ellipsizes) instead of growing the header. #doc-title already ellipsizes on one line.
  2. No HTML/JS changes (ids/classes unchanged → phase-10 tests intact).
  3. PLAN §7.1: note the shared 64px header bar across all three pages.

Locked decisions

None. A11/Phase-08 tokens untouched (same colors, same hairline).

Testing & Quality

  • E2E: tests/e2e/test_header_consistency.py per the story mapping (desktop 1280px + mobile 375px: three pages, three identical boxes).
  • Regression: test_document_viewer.py green in isolation (viewer content/meta/back link unchanged).
  • Coverage gate unchanged (no app/ code touched → stays >90%).

Commit

git add -A .agents/ frontend/assets/styles.css tests/e2e/test_header_consistency.py && git commit --no-gpg-sign -m "fix(ui): uniform header bar height on chat, sources, and the document viewer"