Implement hybrid print preview with CSS-based approach

- Add hidden print-preview-copy div at app level for clean print isolation
- Use @media print rules to show only print copy (960x720) in landscape
- Auto-sync print copy with preview content on modal render via use_effect
- Copy CSS variables and data attributes for proper hour filtering
- Set explicit dimensions matching print-preview-paper content area
- Force landscape orientation with @page rule for better calendar printing

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-12 13:17:21 -04:00
parent a297d38276
commit 96585440d1
7 changed files with 105 additions and 607 deletions

View File

@@ -1702,6 +1702,9 @@ pub fn App() -> Html {
on_close={on_mobile_warning_close}
/>
</div>
// Hidden print copy that gets shown only during printing
<div id="print-preview-copy" class="print-preview-paper" style="display: none;"></div>
</BrowserRouter>
}
}