mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-23 00:53:38 +02:00
DottaandPaperclip
8f3b5ab4b4
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>
