fix: improve native print output for dashboards and record tables (#22272)

## Summary

- Adds print-specific snapshots for dashboards so native browser
print/PDF captures charts and front components instead of the app shell.
- Adds record-table print snapshots for object index pages so printable
tables are generated from visible rows and native print avoids
virtualized blank pages.
- Preserves rendered chart layers by rasterizing canvas/SVG content for
print.

## AI-generated disclosure

This pull request was AI-generated by Hermes Agent on behalf of Vittorio
Alfieri. The changes were reviewed and tested locally before submission.

## Screenshots

### Dashboard print

**Before**

![Dashboard print
before](https://raw.githubusercontent.com/vittolago/twenty/fix/dashboard-native-print/packages/twenty-front/docs/print-screenshots/dashboard-before.png)

**After**

![Dashboard print
after](https://raw.githubusercontent.com/vittolago/twenty/fix/dashboard-native-print/packages/twenty-front/docs/print-screenshots/dashboard-after.png)

### Table records print

**Before**

![Table records print
before](https://raw.githubusercontent.com/vittolago/twenty/fix/dashboard-native-print/packages/twenty-front/docs/print-screenshots/tasks-before.png)

**After**

![Table records print
after](https://raw.githubusercontent.com/vittolago/twenty/fix/dashboard-native-print/packages/twenty-front/docs/print-screenshots/tasks-after.png)

## Test plan

- [x] `yarn nx typecheck twenty-front`
- [x] `yarn nx build twenty-front`
- [x] Generated dashboard PDFs from the preview build and rasterized
pages to PNG for visual verification.
- [x] Generated Tasks/table-record PDFs from the preview build and
verified the final page contains table content instead of blank pages.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22272?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
vittolago
2026-06-29 15:41:37 -05:00
committed by GitHub
parent 78cbe498f6
commit fb800e7a2d
7 changed files with 175 additions and 9 deletions
@@ -23,6 +23,18 @@ const StyledRow = styled.div`
flex-direction: row;
min-height: 0;
min-width: 0;
@media print {
display: block;
min-height: auto;
min-width: auto;
// Only the main content (first child) is printed; the side panel and its
// resize chrome that follow it are hidden.
> *:not(:first-child) {
display: none;
}
}
`;
const StyledContent = styled.div`
@@ -31,6 +43,13 @@ const StyledContent = styled.div`
min-height: 0;
min-width: 0;
overflow: hidden;
@media print {
display: block;
min-height: auto;
min-width: auto;
overflow: visible;
}
`;
const StyledContentTransitionContainer = styled.div`
@@ -39,6 +58,13 @@ const StyledContentTransitionContainer = styled.div`
min-height: 0;
min-width: 0;
overflow: hidden;
@media print {
display: block;
min-height: auto;
min-width: auto;
overflow: visible;
}
`;
const StyledContentTransitionPage = styled(motion.div)`
@@ -47,6 +73,12 @@ const StyledContentTransitionPage = styled(motion.div)`
min-height: 0;
min-width: 0;
width: 100%;
@media print {
display: block;
min-height: auto;
min-width: auto;
}
`;
const MainAppLayoutOutlet = () => {