[timdegroot1996]

Refs #368. This covers the print / PDF part (level 2) only. Per-graph PNG/CSV export (level 1) and data export (level 3) are left until someone asks for them.

What it does

Printing a page with Ctrl+P, or Save as PDF in the print dialog, now gives the page as it looks on screen (theme, filters, layout, custom graphs, widgets, notes), without the on-screen controls:

• Hidden: the navbar, toasts, modals, graph/layout/widget buttons, info icons, note edit buttons, and the DataTables search, paging and sort arrows.
• Kept: section filters, printed as plain values, so the PDF records what the graphs show.
• Layout: the GridStack layout is rebuilt as a CSS grid from the --gs-x/y/w/h variables GridStack sets on each tile. Rows scale with the page width (cqw), so tiles keep their position and proportions and are never split over two pages. A section moves to a new page when it doesn't fit.
• Charts: Chart.js doesn't redraw for print, so the on-screen drawing is scaled into each tile with object-fit: contain, without stretching. Graphs that scroll inside .vertical print whole.
• Tables: tables (Test Notes, custom graphs in table view) let their row grow, so every row of their current page prints instead of being cut off.
• Fullscreen: a graph open in fullscreen prints alone on one page.
• Collapsed sections: print as the header only.
• Pages are landscape. Setting this in CSS means the print dialog no longer offers an orientation choice.
• Paper is white in both themes. Dark mode keeps its dark sections on the white paper.

Fixes

• The old @media print block in 06-graphs.css never applied: its selector had a typo (.grid-stack-item-contentvas). Removed.
• window.onbeforeprint in database.js returned a Promise, which browsers ignore. Removed.
• gridstack.css ships print rules that size tiles to their content. The new stylesheet overrides them.

Files

• New css/components/11-print.css, CSS only.
• Docs: "Printing and PDF" section in docs/tabs-pages.md.

Testing

• Generated the example dashboard from source. Set it up with notes switched on, a stat widget, a link widget and five custom graphs (one in table view), then saved the layout.
• Rendered PDFs with Playwright's print emulation and checked every page. Covered the light and dark themes, a collapsed section, a fullscreen graph, and the Overview, Compare and Tables pages.
• Only Chromium was checked, not Firefox.
• Python unit tests: 434 passed.
• JS unit tests were not run locally: vitest is missing from node_modules and Docker wasn't running. No JS test touches database.js.
• No robot tests: the change is print-only CSS, and the screen rendering is unchanged.

🤖 Generated with Claude Code