feat(network): improve PDF export with print stylesheet
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -445,3 +445,42 @@
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Print / PDF export ───────────────────────────────────────────────── */
|
||||
@media print {
|
||||
/* Hide everything that isn't the canvas */
|
||||
body > * { display: none !important; }
|
||||
|
||||
/* Show only the React Flow viewport inside the diagram editor page */
|
||||
#root { display: block !important; }
|
||||
#root > * { display: none !important; }
|
||||
|
||||
/* The diagram editor mounts as a child of the app shell — target the canvas wrapper */
|
||||
.react-flow__renderer,
|
||||
.react-flow__viewport,
|
||||
.react-flow {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Make the canvas fill the printed page */
|
||||
.react-flow {
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Force light backgrounds on nodes so they're readable on white paper */
|
||||
.react-flow__node {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/* Hide UI chrome */
|
||||
.react-flow__controls,
|
||||
.react-flow__minimap,
|
||||
.react-flow__panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user