Files
brain-of-reese/.agent/phases/complete/12_header_consistency/00_phase.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

2.2 KiB

Phase 12 — One Header, Same Size Everywhere

Story: .agent/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 .agent/ 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"