From 2aeaa119f7a0ea0050593b3d4db845b4292a0bbe Mon Sep 17 00:00:00 2001 From: Corey Blais Date: Tue, 2 Jun 2026 17:24:32 -0400 Subject: [PATCH] Wrap adoption report in letter sheet --- frontend/src/App.tsx | 100 ++++++++++++++++++++++++------------------- 1 file changed, 57 insertions(+), 43 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d3cbc9a..e24d450 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4227,18 +4227,28 @@ function App() { background: ${bodyBackground}; box-sizing: border-box; color: var(--ink); + display: flex; font-family: Inter, Arial, sans-serif; font-size: 13px; + justify-content: center; line-height: 1.38; - margin: 0 auto; - max-width: 7.5in; + margin: 0; min-height: 100vh; - padding: 0.28in; + padding: 24px; position: relative; } *, *::before, *::after { box-sizing: inherit; } img, svg { max-width: 100%; } ${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 { background: ${headerBackground}; border: 1px solid var(--border); @@ -4332,12 +4342,14 @@ function App() { main { margin-top: 16px; } @media print { @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; } button { display: none; } } @media (max-width: 820px) { body { padding: 18px; } + .report-page { padding: 18px; width: 100%; } header { grid-template-columns: 1fr; justify-items: center; @@ -4351,45 +4363,47 @@ function App() { -
- -
- ${escapeReportHtml(selectedBird.name)} profile photo -

${escapeReportHtml(selectedBird.name)}

-

Adoption Report

-

Generated ${escapeReportHtml(formatDateTime(new Date().toISOString()))}

-
-
-

Join

- FlockPal - - - - -

${escapeReportHtml(transferCode)}

-

Enter this code to keep ${escapeReportHtml(selectedBird.name)}'s care history flying forward.

-
-
-
-

Flock Member Info

-
- ${profileRows.map(([label, value]) => `
${escapeReportHtml(label)}${escapeReportHtml(value)}
`).join('')} -
- ${detailList('Motivators', selectedBird.motivators)} - ${detailList('Demotivators', selectedBird.demotivators)} -

Weight Graph

- ${chartSvg} -

Weight History

- ${weightRows}
DateWeightNotes
-

Veterinary Clinic Info

-
- ${vetRows.map(([label, value]) => `
${escapeReportHtml(label)}${escapeReportHtml(value)}
`).join('')} -
-

Vet Visit History

- ${vetVisitRows}
DateClinicReasonNotes
-

Notes

- ${noteRows} -
+
+
+ +
+ ${escapeReportHtml(selectedBird.name)} profile photo +

${escapeReportHtml(selectedBird.name)}

+

Adoption Report

+

Generated ${escapeReportHtml(formatDateTime(new Date().toISOString()))}

+
+
+

Join

+ FlockPal + + + + +

${escapeReportHtml(transferCode)}

+

Enter this code to keep ${escapeReportHtml(selectedBird.name)}'s care history flying forward.

+
+
+
+

Flock Member Info

+
+ ${profileRows.map(([label, value]) => `
${escapeReportHtml(label)}${escapeReportHtml(value)}
`).join('')} +
+ ${detailList('Motivators', selectedBird.motivators)} + ${detailList('Demotivators', selectedBird.demotivators)} +

Weight Graph

+ ${chartSvg} +

Weight History

+ ${weightRows}
DateWeightNotes
+

Veterinary Clinic Info

+
+ ${vetRows.map(([label, value]) => `
${escapeReportHtml(label)}${escapeReportHtml(value)}
`).join('')} +
+

Vet Visit History

+ ${vetVisitRows}
DateClinicReasonNotes
+

Notes

+ ${noteRows} +
+
`); reportWindow.document.close();