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**  **After**  ### Table records print **Before**  **After**  ## 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:
+32
@@ -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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user