fix(ui): uniform header bar height on chat, sources, and the document viewer
This commit is contained in:
@@ -152,6 +152,10 @@ body::after {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
/* Phase 12: body is a definite-height flex column; without this the
|
||||
header shrinks (flex-shrink:1) to its content minimum on any page
|
||||
whose content overflows the viewport (e.g. Sources at ≤640px). */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 2px brand→cyan gradient hairline under the sticky header (phase 08;
|
||||
shared by the app header and the document-viewer header, phase 10). */
|
||||
@@ -550,14 +554,20 @@ body::after {
|
||||
.docs-table tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* ---------- Document viewer (phase 10) ---------- */
|
||||
/* Phase 12: the same fixed-height bar as .app-header (--header-h, 64px /
|
||||
58px mobile) — the header must never change size between chat,
|
||||
sources, and the document viewer (owner report 2026-08-22). */
|
||||
.doc-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: var(--surface);
|
||||
height: var(--header-h);
|
||||
/* Phase 12: same guard as .app-header — the bar never shrinks. */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.doc-header-inner {
|
||||
padding-block: 0.7rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
@@ -589,15 +599,21 @@ body::after {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* Meta row: source badge · format badge · mono path · indexed · chunks. */
|
||||
/* Meta row: source badge · format badge · mono path · indexed · chunks.
|
||||
Phase 12: it may clip, but it must NEVER wrap — a wrapped meta row
|
||||
would grow the header past the shared --header-h bar. */
|
||||
.doc-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--ink-soft);
|
||||
/* Overflowing content (badges + path + dates) clips at the bar edge;
|
||||
nowrap keeps text on one line so the row can never grow the header. */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.doc-source-badge {
|
||||
background: var(--brand-soft);
|
||||
@@ -622,6 +638,9 @@ body::after {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* The path is the meta row's designated ellipsis target: with a floor it
|
||||
keeps a visible box on narrow screens while the trailing badges clip. */
|
||||
min-width: 6rem;
|
||||
}
|
||||
.doc-chunks { font-family: var(--mono); }
|
||||
|
||||
@@ -743,7 +762,7 @@ body::after {
|
||||
.suggestions { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
|
||||
padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
|
||||
.suggestion-chip { flex: 0 0 auto; }
|
||||
.doc-header-inner { flex-wrap: wrap; gap: 0.5rem; padding-block: 0.6rem; }
|
||||
.doc-header-inner { flex-wrap: nowrap; gap: 0.5rem; } /* phase 12: fixed-height bar — no wrap, no extra padding */
|
||||
#doc-title { font-size: 1.1rem; }
|
||||
.doc-path { max-width: 16rem; }
|
||||
.doc-md { padding: 1.1rem 1rem; }
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
"""Phase 12 E2E (Playwright): one header, same size on every page.
|
||||
|
||||
Story: ``.agent/user_stories/header-consistency.md``
|
||||
Run in isolation (DB must be up: ``podman compose up -d db``):
|
||||
|
||||
uv run pytest tests/e2e/test_header_consistency.py -v --no-cov
|
||||
|
||||
The sticky top bar must be exactly ``--header-h`` tall on Chat, Sources,
|
||||
and the document viewer (whose back button says "Sources" — the page
|
||||
users compare against chat): 64px desktop, 58px at ≤640px.
|
||||
|
||||
Test → story mapping (Playwright Mapping Rule):
|
||||
1. ``test_header_height_identical_across_pages_desktop``
|
||||
2. ``test_header_height_identical_across_pages_mobile``
|
||||
3. ``test_viewer_header_content_still_fits`` (phase-10 regression guard)
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import asyncio
|
||||
from pathlib import Path
|
||||
from threading import Thread
|
||||
from typing import Any
|
||||
|
||||
from playwright.sync_api import Page, expect
|
||||
from sqlalchemy import text
|
||||
|
||||
from app.config import Settings
|
||||
from app.db import SessionLocal
|
||||
from app.rag.importer import ImportSummary, import_sources
|
||||
from app.rag.llm import LLMClient
|
||||
|
||||
REPO = Path(__file__).resolve().parents[2]
|
||||
FIXTURES = REPO / "tests" / "fixtures" / "docs"
|
||||
VIEWER_URL = "/document.html?source=docs&path=homelab%2Fkubernetes.md"
|
||||
SOURCES_URL = "/sources.html"
|
||||
|
||||
#: The shared header-bar token values (frontend/assets/styles.css :root
|
||||
#: and the ≤640px media query).
|
||||
DESKTOP_HEADER_H = 64
|
||||
MOBILE_HEADER_H = 58
|
||||
|
||||
|
||||
async def _import_fixtures(mock_port: int) -> ImportSummary:
|
||||
kwargs: dict[str, Any] = {"_env_file": None, "llm_base_url": f"http://127.0.0.1:{mock_port}/v1"}
|
||||
settings = Settings(**kwargs) # pyright: ignore[reportCallIssue]
|
||||
return await import_sources([FIXTURES], LLMClient(settings))
|
||||
|
||||
|
||||
def _run_in_thread(coro: Any) -> Any:
|
||||
"""Run a coroutine on a worker thread (Playwright owns the test loop)."""
|
||||
box: dict[str, Any] = {}
|
||||
|
||||
def runner() -> None:
|
||||
try:
|
||||
box["value"] = asyncio.run(coro)
|
||||
except BaseException as e: # noqa: BLE001 — re-raised on the test thread
|
||||
box["error"] = e
|
||||
|
||||
t = Thread(target=runner)
|
||||
t.start()
|
||||
t.join()
|
||||
if "error" in box:
|
||||
raise box["error"]
|
||||
return box["value"]
|
||||
|
||||
|
||||
def _seed_db(mock_port: int) -> None:
|
||||
with SessionLocal() as db:
|
||||
db.execute(text("TRUNCATE chunks, documents, query_log"))
|
||||
db.commit()
|
||||
_run_in_thread(_import_fixtures(mock_port))
|
||||
|
||||
|
||||
def _box_height(page: Page, selector: str) -> float:
|
||||
box = page.locator(selector).bounding_box()
|
||||
assert box is not None, f"{selector} not rendered"
|
||||
return box["height"]
|
||||
|
||||
|
||||
def _header_heights(page: Page, app_url: str) -> dict[str, float]:
|
||||
"""Measured heights of the sticky top bar on the three pages."""
|
||||
heights: dict[str, float] = {}
|
||||
|
||||
page.goto(app_url + "/")
|
||||
heights["chat"] = _box_height(page, ".app-header")
|
||||
|
||||
page.goto(app_url + SOURCES_URL)
|
||||
heights["sources"] = _box_height(page, ".app-header")
|
||||
|
||||
page.goto(app_url + VIEWER_URL)
|
||||
expect(page.locator("#doc-title")).to_have_text("Kubernetes Homelab Cluster", timeout=15_000)
|
||||
heights["document"] = _box_height(page, ".doc-header")
|
||||
return heights
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 1. Desktop: all three pages, one identical 64px bar
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def test_header_height_identical_across_pages_desktop(
|
||||
page: Page, app_url: str, mock_llm: int, db_ready: None
|
||||
) -> None:
|
||||
page.set_viewport_size({"width": 1280, "height": 800})
|
||||
_seed_db(mock_llm)
|
||||
|
||||
heights = _header_heights(page, app_url)
|
||||
assert heights["chat"] == DESKTOP_HEADER_H, f"chat header {heights['chat']}px"
|
||||
assert heights["sources"] == DESKTOP_HEADER_H, f"sources header {heights['sources']}px"
|
||||
assert heights["document"] == DESKTOP_HEADER_H, (
|
||||
f"document header {heights['document']}px (was content-sized)"
|
||||
)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 2. Mobile (≤640px): all three pages, one identical 58px bar
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def test_header_height_identical_across_pages_mobile(
|
||||
page: Page, app_url: str, mock_llm: int, db_ready: None
|
||||
) -> None:
|
||||
page.set_viewport_size({"width": 375, "height": 812})
|
||||
_seed_db(mock_llm)
|
||||
|
||||
heights = _header_heights(page, app_url)
|
||||
assert heights["chat"] == MOBILE_HEADER_H, f"chat header {heights['chat']}px"
|
||||
assert heights["sources"] == MOBILE_HEADER_H, f"sources header {heights['sources']}px"
|
||||
assert heights["document"] == MOBILE_HEADER_H, (
|
||||
f"document header {heights['document']}px (meta row must clip, not wrap)"
|
||||
)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 3. Regression: the phase-10 viewer header still shows title, badges,
|
||||
# back link — single-line on both desktop and mobile
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def test_viewer_header_content_still_fits(
|
||||
page: Page, app_url: str, mock_llm: int, db_ready: None
|
||||
) -> None:
|
||||
_seed_db(mock_llm)
|
||||
|
||||
for width, expected_h in ((1280, DESKTOP_HEADER_H), (375, MOBILE_HEADER_H)):
|
||||
page.set_viewport_size({"width": width, "height": 800})
|
||||
page.goto(app_url + VIEWER_URL)
|
||||
expect(
|
||||
page.locator("#doc-title")
|
||||
).to_have_text("Kubernetes Homelab Cluster", timeout=15_000)
|
||||
|
||||
# Title on a single line (ellipsis, no wrap growth).
|
||||
assert _box_height(page, "#doc-title") < 30 # one line at either size
|
||||
|
||||
# Meta row: badges + path present and visible, single line.
|
||||
assert _box_height(page, ".doc-meta") < 26
|
||||
expect(page.locator(".doc-source-badge", has_text="docs")).to_be_visible()
|
||||
expect(page.locator(".format-badge", has_text="md")).to_be_visible()
|
||||
expect(page.locator(".doc-path", has_text="homelab/kubernetes.md")).to_be_visible()
|
||||
|
||||
# Back link still there, ≥44px touch target, in the shared bar.
|
||||
back = page.locator("#doc-back")
|
||||
expect(back).to_be_visible()
|
||||
assert _box_height(page, "#doc-back") >= 44
|
||||
expect(page.locator(".doc-header")).to_have_css(
|
||||
"height", f"{expected_h}px"
|
||||
)
|
||||
Reference in New Issue
Block a user