Skip to content

feat(print): hide chrome + expand collapsibles when printing ReviewsTab - #833

Open
brooksdevon001-star wants to merge 2 commits into
CalloraOrg:mainfrom
brooksdevon001-star:feat/fwc26-reviews-print
Open

feat(print): hide chrome + expand collapsibles when printing ReviewsTab#833
brooksdevon001-star wants to merge 2 commits into
CalloraOrg:mainfrom
brooksdevon001-star:feat/fwc26-reviews-print

Conversation

@brooksdevon001-star

Copy link
Copy Markdown
Contributor

feat(print): hide chrome + expand collapsibles when printing ReviewsTab [FWC26]

───────────────────────────────────────────────────────────────────────────────────────────────

Summary

Fixes the print experience for the Reviews tab on the API Detail page (GrantFox FWC26). When a
user prints Cmd/Ctrl+P while on the Reviews tab, interactive chrome is now hidden and all
review content is fully expanded — nothing is clipped or cut off.

What changed

src/pages/ApiDetailPage.tsx

  • Added data-reviews-section attribute to the reviews
    as a CSS scope anchor
  • Wrapped the sort dropdown in a reviews-sort-controls no-print div — hidden on print (sort
    order is irrelevant on paper)
  • Added no-print to the "Write a Review" button — interactive, not actionable on paper
  • Added reviews-list class to the review cards grid for stable print targeting

src/index.css

  • Extended the existing @media print block with [data-reviews-section]-scoped rules:
    • Expands all review cards (max-height: none, overflow: visible, height: auto)
    • Expands any aria-hidden, [hidden], or
      Details collapsibles inside the panel —
      future-proofs against JS-driven collapse patterns
    • Forces single-column grid layout for predictable paper width
    • Adds break-inside: avoid per card to prevent cards splitting across page breaks

src/pages/ReviewsTab.print.test.ts (new)

  • 13 focused contract tests: markup class presence, CSS rule existence, and the existing
    main.tsx print.css import guard

docs/ReviewsTab-print.md (new)

  • Full documentation: rationale, file changes, how the CSS scoping works, test instructions,
    accessibility notes, browser compatibility

Testing

npm test -- --run

13 new tests pass. Existing src/print.test.ts (10 tests) continues to pass. No regressions.

Notes

No separate print.css was created — the existing contract test asserts all print styles must
live in src/index.css.

Closes #688

GrantFox FWC26 — ReviewsTab print support

- Add `data-reviews-section` attribute to the reviews <section> as a
  CSS scope anchor for all print rules
- Add `reviews-sort-controls no-print` class to the sort-by row so
  the sort dropdown is hidden on print
- Add `no-print` to the Write a Review button (interactive, meaningless
  on paper)
- Add `reviews-list` class to the review cards grid for stable print
  targeting
- Extend `@media print` in index.css with [data-reviews-section] rules:
  expand all review cards (max-height: none, overflow: visible),
  expand aria-hidden/[hidden]/details collapsibles, force single-column
  grid, add break-inside: avoid per card
- Add 13 focused contract tests in ReviewsTab.print.test.ts
- Add docs/ReviewsTab-print.md documenting the change

All 13 new tests pass. No regressions in existing print.test.ts (10/10).
@drips-wave

drips-wave Bot commented Jul 28, 2026

Copy link
Copy Markdown

@brooksdevon001-star Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add print stylesheet section for ReviewsTab [b#011]

1 participant