Wrap adoption report in letter sheet

This commit is contained in:
Corey Blais
2026-06-02 17:24:32 -04:00
committed by blaisadmin
parent 36690c0174
commit 2aeaa119f7
+18 -4
View File
@@ -4227,18 +4227,28 @@ function App() {
background: ${bodyBackground}; background: ${bodyBackground};
box-sizing: border-box; box-sizing: border-box;
color: var(--ink); color: var(--ink);
display: flex;
font-family: Inter, Arial, sans-serif; font-family: Inter, Arial, sans-serif;
font-size: 13px; font-size: 13px;
justify-content: center;
line-height: 1.38; line-height: 1.38;
margin: 0 auto; margin: 0;
max-width: 7.5in;
min-height: 100vh; min-height: 100vh;
padding: 0.28in; padding: 24px;
position: relative; position: relative;
} }
*, *::before, *::after { box-sizing: inherit; } *, *::before, *::after { box-sizing: inherit; }
img, svg { max-width: 100%; } img, svg { max-width: 100%; }
${backgroundOverlayCss} ${backgroundOverlayCss}
.report-page {
background: ${printFriendly ? '#fff' : 'rgba(255, 253, 249, 0.82)'};
border: 1px solid ${printFriendly ? 'transparent' : 'rgba(53, 129, 98, 0.12)'};
border-radius: ${printFriendly ? '0' : '18px'};
box-shadow: ${printFriendly ? 'none' : '0 18px 42px rgba(86, 63, 34, 0.16)'};
max-width: 100%;
padding: 0.28in;
width: 7.5in;
}
header { header {
background: ${headerBackground}; background: ${headerBackground};
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -4332,12 +4342,14 @@ function App() {
main { margin-top: 16px; } main { margin-top: 16px; }
@media print { @media print {
@page { margin: 0.4in; size: letter; } @page { margin: 0.4in; size: letter; }
body { margin: 0 auto; padding: 0; } body { display: block; margin: 0; padding: 0; }
.report-page { border: 0; border-radius: 0; box-shadow: none; padding: 0; width: 100%; }
header { box-shadow: none; break-inside: avoid; } header { box-shadow: none; break-inside: avoid; }
button { display: none; } button { display: none; }
} }
@media (max-width: 820px) { @media (max-width: 820px) {
body { padding: 18px; } body { padding: 18px; }
.report-page { padding: 18px; width: 100%; }
header { header {
grid-template-columns: 1fr; grid-template-columns: 1fr;
justify-items: center; justify-items: center;
@@ -4351,6 +4363,7 @@ function App() {
</style> </style>
</head> </head>
<body> <body>
<div class="report-page">
<header> <header>
<img class="brand-logo" src="${escapeReportHtml(reportLogoUrl)}" alt="FlockPal logo"> <img class="brand-logo" src="${escapeReportHtml(reportLogoUrl)}" alt="FlockPal logo">
<div class="report-title"> <div class="report-title">
@@ -4390,6 +4403,7 @@ function App() {
<h2>Notes</h2> <h2>Notes</h2>
${noteRows} ${noteRows}
</main> </main>
</div>
</body> </body>
</html>`); </html>`);
reportWindow.document.close(); reportWindow.document.close();