The injected responsive stylesheet for the Briefing page tried to hide
section headers and non-active sections at <=700px, but the inline
`display: flex` on <section data-briefs-section> and its <header> beat
the attribute-selector rules on specificity. The result was that on a
real 390px render the MobileTabs toggle did nothing — every section
stayed visible.
Add `!important` to the two media-query rules so they win against the
inline styles, plus a small mobile reflow rule that drops the page-meta
line to its own row instead of orphaning the timestamp.
Also rebuild the screenshot fixture to mount the real <BriefingPage>
component (via the same SDK mock pattern the brief-card vitest already
uses) instead of hand-writing the page shell. The previous fixture
re-implemented the layout in static HTML and never rendered MobileTabs
or Legend, which masked the specificity bug and produced PNGs that
didn't match what a user actually sees.
Add briefing-page.spec.tsx as a regression guard for the chrome the
screenshot fixture exercises: MobileTabs sticky bar, Legend, the
data-mobile-hidden attribute on non-active sections, and the new header
data attributes.
Re-captured desktop, mobile, and empty-state PNGs against the real React
tree. The mobile shot now shows the All / Needs you / Live / Done tab
bar and only the active filter section.
Refs PAP-9963.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The briefing screenshot spec now writes the intermediate HTML into a
test-local mkdtemp directory and cleans it up after capture, so the
pr-screenshots/pap-9963 folder ships only the PNG deliverables.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Adds a screenshot-capture spec gated behind BRIEFS_CAPTURE_SCREENSHOTS=1
that renders the Briefing page fixture set and writes desktop, mobile,
and empty-state PNGs into docs/pr-screenshots/pap-9963/ for UX handoff.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Dotta