From 7f0d1057c19a90ba426eaf4e447ab8b052f2833e Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Mon, 20 Jul 2026 13:53:09 +0000
Subject: [PATCH] Fix print layout for weekly actuals report

- Override overflow:hidden on .page-content and .app-shell so the full
  report flows to paper instead of clipping at screen height
- break-inside:avoid on each section so they land whole on a page
- Charts stack vertically on print (full width each) rather than 2-col grid
- Hide sidebar, toolbar; reset backgrounds and shadows for clean output

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/index.css | 43 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 07029927..564d4a07 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -709,13 +709,44 @@ html, body, #root {
   font-size: 13px;
 }
 
-@media print {
-  .wa-toolbar { display: none !important; }
-  .wa-page { overflow: visible; }
-  .wa-charts-row { break-inside: avoid; }
-}
-
 @media (max-width: 900px) {
   .wa-charts-row { grid-template-columns: 1fr; }
   .wa-table { font-size: 11px; }
 }
+
+@media print {
+  /* Un-clip the shell so full content flows to paper */
+  .app-shell          { display: block !important; height: auto !important; overflow: visible !important; }
+  .sidebar, .top-bar  { display: none !important; }
+  .page-content       { overflow: visible !important; height: auto !important; flex: none !important; }
+
+  /* Weekly actuals page resets */
+  .wa-toolbar         { display: none !important; }
+  .wa-page            { height: auto !important; overflow: visible !important; background: #fff; }
+  .wa-content         { padding: 12px; gap: 16px; max-width: none; }
+
+  /* Each section stays whole — browser puts it on a new page if needed */
+  .wa-section {
+    break-inside: avoid;
+    page-break-inside: avoid;
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+    margin-bottom: 14px;
+    padding: 14px;
+  }
+
+  /* Individual cards and tables don't split mid-element */
+  .wa-chart-card    { break-inside: avoid; page-break-inside: avoid; background: #fff; border-color: #ddd; }
+  .wa-table-wrap    { break-inside: avoid; page-break-inside: avoid; }
+
+  /* Side-by-side charts stack vertically so each gets full width on paper */
+  .wa-charts-row    { display: block !important; }
+  .wa-charts-row .wa-chart-card { margin-bottom: 12px; }
+
+  /* Tables */
+  .wa-table         { font-size: 11px; }
+  .wa-table th, .wa-table td { padding: 5px 8px; }
+
+  /* Section titles */
+  .wa-section-title { font-size: 11px; padding-bottom: 6px; margin-bottom: 10px; }
+}