-
Notifications
You must be signed in to change notification settings - Fork 620
Code eval: add media queries for print view #11110
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Adds/adjusts print-specific styling for the Teacher Tool’s code evaluation results view to improve printed output across browsers (Chrome/Firefox/Safari), addressing pxt-arcade issue #7439.
Changes:
- Update global print CSS to avoid html/body sizing/overflow constraints and apply WebKit-friendly body sizing.
- Add
@media printoverrides inEvalResultDisplaystyles to remove scroll/height constraints and improve pagination/print contrast. - Add print pagination tweaks in
CriteriaInstanceDisplayto reduce awkward page breaks.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| teachertool/src/global.scss | Adds global @media print rules to prevent layout clipping and improve Safari printing behavior. |
| teachertool/src/components/styling/EvalResultDisplay.module.scss | Adds print overrides for the evaluation results container and result sections to print cleanly without scroll constraints. |
| teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss | Adds print pagination adjustments and minor print-only styling tweaks for criteria instances. |
| @media print { | ||
| width: 100%; | ||
| padding: 0; | ||
| page-break-inside: avoid; | ||
| } |
Copilot
AI
Feb 13, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
page-break-inside/page-break-after are legacy print properties. To improve standards compliance and compatibility, consider using the modern equivalents as well (e.g., break-inside: avoid and break-after: avoid/avoid-page) alongside these rules throughout this module.
| width: 100%; | ||
|
|
||
| @media print { | ||
| page-break-inside: avoid; |
Copilot
AI
Feb 13, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
page-break-inside is a legacy print property. Consider adding the modern equivalent (break-inside: avoid, optionally alongside page-break-inside) to improve standards compliance and print behavior across browsers.
| page-break-inside: avoid; | |
| page-break-inside: avoid; | |
| break-inside: avoid; |
Fixes microsoft/pxt-arcade#7439.
All of these media queries were generated by copilot. I tested the print view on Chrome, Firefox, and Safari and the changes look good.
Upload target: https://arcade.makecode.com/app/6451bd7e0b2007ed0ba97889a6951047d39ddc78-f49a397a69--eval#