From 6c9017c3dc50670e55cbc98f5ba99944ede7b0a2 Mon Sep 17 00:00:00 2001
From: Corey Blais <corey@blaishome.online>
Date: Tue, 2 Jun 2026 16:33:26 -0400
Subject: [PATCH] Stabilize adoption report layout

---
 frontend/src/App.tsx | 44 ++++++++++++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9dc1ae5..9aae3fa 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4499,13 +4499,18 @@ function App() {
             }
             body {
               background: ${bodyBackground};
+              box-sizing: border-box;
               color: var(--ink);
               font-family: Inter, Arial, sans-serif;
               line-height: 1.45;
-              margin: 32px;
+              margin: 0 auto;
+              max-width: 1080px;
               min-height: 100vh;
+              padding: 32px;
               position: relative;
             }
+            *, *::before, *::after { box-sizing: inherit; }
+            img, svg { max-width: 100%; }
             ${backgroundOverlayCss}
             header {
               background: ${headerBackground};
@@ -4514,8 +4519,8 @@ function App() {
               box-shadow: 0 16px 34px rgba(86, 63, 34, 0.14);
               display: grid;
               gap: 22px;
-              grid-template-columns: 210px 1fr 320px;
-              min-height: 228px;
+              grid-template-columns: minmax(150px, 190px) minmax(240px, 1fr) minmax(190px, 240px);
+              min-height: 214px;
               padding: 18px;
             }
             h1, h2, h3, p { margin: 0; }
@@ -4531,10 +4536,11 @@ function App() {
             .muted { color: var(--muted); margin-top: 6px; }
             .brand-logo {
               align-self: center;
-              height: 210px;
+              height: auto;
               justify-self: start;
+              max-height: 190px;
               object-fit: contain;
-              width: 210px;
+              width: 190px;
             }
             .report-title {
               align-self: center;
@@ -4553,8 +4559,8 @@ function App() {
               object-fit: cover;
               width: 132px;
             }
-            .qr { align-self: center; justify-self: end; text-align: center; width: 320px; }
-            .qr svg { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px; width: 136px; }
+            .qr { align-self: center; justify-self: end; max-width: 240px; text-align: center; width: 100%; }
+            .qr svg { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px; width: 128px; }
             .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere; }
             .qr-join-label {
               color: var(--green);
@@ -4562,17 +4568,18 @@ function App() {
               font-weight: 800;
               letter-spacing: 0.08em;
               line-height: 1;
-              margin-bottom: -28px;
+              margin-bottom: -18px;
               position: relative;
               text-transform: uppercase;
               z-index: 1;
             }
             .qr-wordmark {
               display: block;
-              height: 150px;
-              margin: -28px auto -12px;
+              height: auto;
+              margin: -18px auto -8px;
+              max-height: 96px;
               object-fit: contain;
-              width: 340px;
+              width: min(100%, 240px);
             }
             .qr-note {
               color: var(--blue);
@@ -4597,10 +4604,23 @@ function App() {
             .note p { margin-top: 6px; white-space: pre-wrap; }
             main { margin-top: 24px; }
             @media print {
-              body { margin: 14mm; }
+              @page { margin: 14mm; }
+              body { margin: 0 auto; padding: 0; }
               header { box-shadow: none; break-inside: avoid; }
               button { display: none; }
             }
+            @media (max-width: 820px) {
+              body { padding: 20px; }
+              header {
+                grid-template-columns: 1fr;
+                justify-items: center;
+                text-align: center;
+              }
+              .brand-logo,
+              .qr {
+                justify-self: center;
+              }
+            }
           </style>
         </head>
         <body>