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.
2.2 KiB
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.7remaround 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
- 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-titlealready ellipsizes on one line.
- No HTML/JS changes (ids/classes unchanged → phase-10 tests intact).
- 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.pyper the story mapping (desktop 1280px + mobile 375px: three pages, three identical boxes). - Regression:
test_document_viewer.pygreen 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"