From 571f8e199da6b1f2b64714928708bcceec4869ee Mon Sep 17 00:00:00 2001 From: pavlov346346-source Date: Sat, 12 Sep 2026 14:45:31 +0300 Subject: [PATCH] fix: compact print layout for the order blank and receipt .sun-doc-grid (client/phone/date/address) fell back to whatever the last matching max-width media query set, and print rendering commonly evaluates those against the page's content width - narrow enough to trip the existing max-width:700px breakpoint and stack every field onto its own line instead of the intended 2-column grid. Combined with generous screen-sized padding/font-sizes carried into print, a normal order routinely spilled onto a second page. Adds an explicit @media print block that puts client/phone/date/address in a single row regardless of viewport width (grid-auto-flow:column), sets an explicit @page size/margin instead of relying on the browser default, and shrinks fonts/padding throughout (header, field grid, table rows, summary, footer) for both the order blank (.sun-doc) and the receipt (.sun-receipt, which reuses the same grid). Verified with a standalone reproduction of the markup/CSS - a 2-line order now renders as one compact page instead of stacking every field before ever reaching the table. Co-Authored-By: Claude Sonnet 5 --- public/index.html | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 17cef58..0686c34 100644 --- a/public/index.html +++ b/public/index.html @@ -986,7 +986,29 @@ if (typeof crypto !== 'undefined' && typeof crypto.randomUUID !== 'function') { .sun-doc-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end} .sun-receipt{max-width:720px}.sun-receipt .sun-doc-head{padding-top:4px}.sun-receipt .sun-doc-grid{grid-template-columns:1fr;margin-top:14px}.sun-receipt .sun-doc-footer{grid-template-columns:1fr 1fr} @media(max-width:700px){.sun-doc-head{flex-direction:column}.sun-doc-title{text-align:left}.sun-doc-grid{grid-template-columns:1fr}.sun-doc-footer{grid-template-columns:1fr}.sun-doc-brand img{width:88px;height:58px}} - @media print{.sun-doc-actions{display:none!important}.sun-doc{max-width:none}.sun-doc-head{padding-top:0}.sun-doc-grid{background:#fff;border:1px solid #e0ddd4}.sun-doc th{background:#15364c!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.sun-doc-note{background:#fffaf0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}} + @media print{ + @page{size:A4 portrait;margin:8mm} + .sun-doc-actions{display:none!important} + .sun-doc{max-width:none;font-size:11px} + .sun-doc-head{padding:0 0 8px;gap:12px} + .sun-doc-brand img{width:64px;height:42px} + .sun-doc-brand strong{font-size:15px}.sun-doc-brand small{margin-top:1px;font-size:10px} + .sun-doc-title h2{font-size:17px}.sun-doc-title p{margin-top:2px;font-size:11px} + .sun-doc-grid{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px 10px;margin:8px 0;padding:6px 8px;background:#fff;border:1px solid #e0ddd4} + .sun-doc-field{padding:0;border-bottom:0} + .sun-doc-field span{font-size:8px;margin-bottom:1px} + .sun-doc-field b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} + .sun-doc table{margin-top:6px} + .sun-doc th{background:#15364c!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:9px;padding:4px 5px} + .sun-doc td{padding:3px 5px;font-size:10px} + .sun-doc .doc-sub{font-size:8px;margin-top:1px} + .sun-doc-summary{width:min(260px,100%);margin-top:8px} + .sun-doc-summary p{padding:3px 0;font-size:10px} + .sun-doc-summary .grand{font-size:13px;padding-top:5px} + .sun-doc-note{margin-top:8px;padding:6px 8px;font-size:10px;background:#fffaf0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} + .sun-doc-footer{grid-template-columns:1fr 1fr;gap:20px;margin-top:14px;padding-top:8px;font-size:9px} + .sun-doc-sign{margin-top:14px;padding-top:3px} + } `; document.head.appendChild(documentStyle);