From 05aa0288cb08cf9c223e15012689cc64fedbe53b Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 12 Mar 2026 17:28:25 -0400
Subject: [PATCH] =?UTF-8?q?Badges:=20fix=20print=20centering=20=E2=80=94?=
 =?UTF-8?q?=20dissolve=20.main=5Fcontent;=20hide=20footer/scroll=20buttons?=
 =?UTF-8?q?=20from=20print;=20document=20print=20layout=20architecture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MODULE__AE_Events_Badge_Templates.md      | 37 +++++++++++++++++++
 src/routes/events/+layout.svelte              |  4 +-
 .../badges/[badge_id]/print/+page.svelte      |  8 +++-
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/documentation/MODULE__AE_Events_Badge_Templates.md b/documentation/MODULE__AE_Events_Badge_Templates.md
index 0589caf8..fb684ddc 100644
--- a/documentation/MODULE__AE_Events_Badge_Templates.md
+++ b/documentation/MODULE__AE_Events_Badge_Templates.md
@@ -256,6 +256,43 @@ in DB and may be needed:
 
 ---
 
+## Print Layout Architecture
+
+### How the print CSS works
+
+The print page (`print/+page.svelte`) injects `<style>` blocks into `<svelte:head>` that
+take effect only in `@media print`. The strategy uses `display: contents` to dissolve
+intermediate layout wrappers so `body` becomes the sole centering flex container.
+
+**Wrappers dissolved via `display: contents`:**
+| Selector | Source | Why dissolved |
+|---|---|---|
+| `#ae_main_content` | `events/+layout.svelte` | `overflow-auto`, `flex-col`, `max-w-7xl`, `bg-gray-50` |
+| `.main_content` | `events/+layout.svelte` | `pb-48`, `pt-20+`, `grow`, `items-center`, `justify-start` |
+| `#badge_render_area` | `print/+page.svelte` | Screen-only right-padding offset for controls panel |
+
+**App chrome hidden via `print:hidden`:**
+- `nav.submenu` (events layout nav bar)
+- `footer.footer` (events layout footer)
+- Scroll-to-top / scroll-to-bottom button div
+- Kiosk header (`<header>` in print page)
+- Controls panel (`<div>` fixed right in print page)
+- Debug info section (edit mode only)
+- Root layout: offline banner, session expired banner, hydration overlay, sys/debug menus
+
+**Result:** `body { display: flex; align-items: center; justify-content: center }` directly
+centers `section.event_badge_wrapper` with no intermediate wrappers in the way.
+
+**`@page` size:** Matched to badge stock per layout code. `margin: 0` fills the page.
+For the PVC layout the page size equals the card exactly, so centering is redundant
+but harmless. For layouts where stock ≠ page, centering positions the badge correctly.
+
+**Future per-template margins:** `print_margin_cfg` is already parsed from `cfg_json`
+in `print/+page.svelte`. A dynamic `@page { margin: ... }` injection can be built from
+that value when a UI for it exists.
+
+---
+
 ## Related Files
 
 | File | Role |
diff --git a/src/routes/events/+layout.svelte b/src/routes/events/+layout.svelte
index 43192e63..c9db73a3 100644
--- a/src/routes/events/+layout.svelte
+++ b/src/routes/events/+layout.svelte
@@ -282,6 +282,7 @@
     <div
         class:hidden={yTop < 500}
         class="
+        print:hidden
         z-20
         hover:opacity-100
         fixed bottom-40 right-1
@@ -356,8 +357,7 @@
             class:opacity-80={yTop < 250}
             class:opacity-0={yTop > 250}
             class="
-        footer
-        z-20
+        footer        print:hidden        z-20
         hover:opacity-100
         absolute bottom-0 left-0 right-0
         w-full max-w-7xl
diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte
index 32f0d3c6..5e6bdf7e 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte
@@ -183,8 +183,14 @@
             /* Dissolve layout wrappers — removes their boxes from the layout while
                keeping children renderable. The badge section floats up to body
                as a direct flex child, so body's centering applies to it directly.
-               This avoids all height-chain and overflow-clip issues. */
+               This avoids all height-chain and overflow-clip issues.
+
+               Layers dissolved:
+                 #ae_main_content  — events layout scroll container (flex-col, max-w-7xl, overflow-auto, bg-gray)
+                 .main_content     — events layout inner section (grow, pb-48, pt-20+, items-center)
+                 #badge_render_area — print page badge wrapper (screen-only right padding) */
             #ae_main_content,
+            .main_content,
             #badge_render_area {
                 display: contents !important;
             }