[dev-overlay] hide dev overlay when printing (#73489)
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
-->
While this behavior is not clearly a bug, when I'm debugging print
styling in Next.js, seeing the Next.js dev overlay UI is distracting and
unnecessary:
<img width="766" alt="image"
src="https://github.com/user-attachments/assets/e7a5420d-2f17-4286-8f98-7db33d23dddb">
A few lines of CSS can hide it in that context only. I don't think this
CSS rule needs an integration test, but let me know if so.
---
**Jiwon:** Since the dev indicator will always be visible, it is a good
default to hide it when printing.
---------
Co-authored-by: devjiwonchoi <devjiwonchoi@gmail.com>
