Wrap adoption report in letter sheet

2026-06-02 17:24:32 -04:00
parent 36690c0174
commit 2aeaa119f7
1 changed files with 57 additions and 43 deletions
@@ -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,6 +4363,7 @@ function App() {
          </style>
        </head>
        <body>
+          <div class="report-page">
            <header>
              <img class="brand-logo" src="${escapeReportHtml(reportLogoUrl)}" alt="FlockPal logo">
              <div class="report-title">
@@ -4390,6 +4403,7 @@ function App() {
              <h2>Notes</h2>
              ${noteRows}
            </main>
+          </div>
        </body>
      </html>`);
    reportWindow.document.close();