From c3a4ff45c7ff6a0aa947ba7b6b5c065dd0c97f6c Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 12 Mar 2026 16:52:17 -0400
Subject: [PATCH] =?UTF-8?q?Badges:=20clean=20print=20output=20=E2=80=94=20?=
 =?UTF-8?q?suppress=20outlines,=20hide=20app=20chrome,=20reset=20layout=20?=
 =?UTF-8?q?container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte                     | 19 ++++++++-------
 src/routes/events/+layout.svelte              |  1 +
 .../ae_comp__badge_obj_view_v2.svelte         |  6 +++++
 .../badges/[badge_id]/print/+page.svelte      | 24 +++++++++++++++++++
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 12bcbe7a..9fb764ed 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -290,14 +290,14 @@
 </svelte:head>
 
 {#if browser && (is_offline || api_unreachable)}
-    <div class="fixed top-0 left-0 right-0 z-100 p-4 bg-orange-600/90 text-white text-center shadow-2xl flex items-center justify-center gap-4">
+    <div class="print:hidden fixed top-0 left-0 right-0 z-100 p-4 bg-orange-600/90 text-white text-center shadow-2xl flex items-center justify-center gap-4">
         <span class="text-xl font-bold">{is_offline ? 'Offline' : api_error_msg}</span>
         <button class="btn btn-sm variant-filled-white text-orange-600" onclick={() => window.location.reload()}>Retry</button>
     </div>
 {/if}
 
 {#if browser && flag_expired}
-    <div class="fixed top-0 left-0 right-0 z-50 px-4 py-2 bg-amber-500 text-white shadow-xl flex items-center justify-between gap-4">
+    <div class="print:hidden fixed top-0 left-0 right-0 z-50 px-4 py-2 bg-amber-500 text-white shadow-xl flex items-center justify-between gap-4">
         <p class="text-sm font-semibold">Your session has expired. Please reload or sign in again.</p>
         <div class="flex gap-2 items-center shrink-0">
             <button class="btn btn-sm variant-filled-white text-amber-700" onclick={() => window.location.reload()}>Reload</button>
@@ -310,7 +310,7 @@
     {@render children?.()}
 
     {#if is_hydrating}
-        <div class="fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
+        <div class="print:hidden fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
             <div class="preset-filled-surface-100-900 p-8 rounded-2xl shadow-2xl flex flex-col items-center gap-4">
                 <span class="fas fa-cog fa-spin text-5xl text-primary-500"></span>
                 <div class="text-center font-bold text-xl">Hydrating Aether...</div>
@@ -327,10 +327,13 @@
 {/if}
 
 {#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)}
-    <E_app_sys_menu {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
+    <!-- print:hidden wrapper: sys/debug menus are fixed overlays — must not appear on printed pages -->
+    <div class="print:hidden">
+        <E_app_sys_menu {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
 
-    <!-- You must be in Edit Mode to initially see the Debug expand button. Once expanded, you can toggle the Edit Mode while still seeing the expanded Debug content. -->
-    {#if $ae_loc.edit_mode || $ae_loc.debug_menu.expand}
-        <E_app_debug_menu bind:hide={$ae_loc.debug_menu.hide} bind:expand={$ae_loc.debug_menu.expand} />
-    {/if}
+        <!-- You must be in Edit Mode to initially see the Debug expand button. Once expanded, you can toggle the Edit Mode while still seeing the expanded Debug content. -->
+        {#if $ae_loc.edit_mode || $ae_loc.debug_menu.expand}
+            <E_app_debug_menu bind:hide={$ae_loc.debug_menu.hide} bind:expand={$ae_loc.debug_menu.expand} />
+        {/if}
+    </div>
 {/if}
diff --git a/src/routes/events/+layout.svelte b/src/routes/events/+layout.svelte
index e440e16b..43192e63 100644
--- a/src/routes/events/+layout.svelte
+++ b/src/routes/events/+layout.svelte
@@ -216,6 +216,7 @@
             class:opacity-0={yTop > 250}
             class="
         submenu
+        print:hidden
         z-20
         hover:opacity-100
         absolute top-0 left-0 right-0
diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
index d32f9fb8..9138b0d5 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
@@ -1003,9 +1003,15 @@
     }
 
     @media print {
+        /* Remove all decorative outlines — only badge content should print */
         .event_badge_wrapper {
+            outline: none !important;
             box-shadow: none;
         }
+        .badge_front,
+        .badge_back {
+            outline: none !important;
+        }
     }
 
     .badge_front,
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 dd808201..71127ef9 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
@@ -134,6 +134,30 @@
         it dynamically here based on the template's layout field rather than putting
         it in the compiled layout CSS files.
     -->
+
+    <!-- Print chrome reset: applied regardless of layout. Hides app nav and removes
+         the events layout container's background, flex layout, overflow clip, and
+         width constraints so the badge fills the page cleanly. -->
+    <style>
+        @media print {
+            /* Events layout nav bar */
+            .submenu { display: none !important; }
+            /* Events #ae_main_content — override flex, bg, overflow, and size constraints */
+            #ae_main_content {
+                display: block !important;
+                overflow: visible !important;
+                max-width: none !important;
+                width: 100% !important;
+                height: auto !important;
+                min-height: 0 !important;
+                padding: 0 !important;
+                margin: 0 !important;
+                background: transparent !important;
+                gap: 0 !important;
+            }
+        }
+    </style>
+
     {#if $lq__event_badge_template_obj?.layout === 'badge_3.5x5.5_pvc'}
         <style>
             @page { size: 3.5in 5.5in; margin: 0; }