From 50c484a4cc63f098e84739bb5af90ae250c1a6d8 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Fri, 15 May 2026 15:48:37 -0400 Subject: [PATCH] fix(badges): fix 4x6 fanfold header image display and body gap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two layout fixes for the badge_4x6_fanfold layout (no background_image_path): 1. badge_header max-height: 1.5in — the Axonius logo (624×232px) renders at ~1.49in tall at full badge width. The inherited max-h-[1.00in] was cropping the bottom half of the image. 2. badge_body margin-top: 0 — overrides the component-level mt-54 (≈2.25in). That margin was needed for the PVC layout where a full-bleed background image covered the badge and body text needed to start in the image's designated zone. For fanfold badges with a standalone header_path, mt-54 created a 2.25in blank gap between the header and the attendee name. Also updates default fit_heights for badge_4x6_fanfold to match the 4.0in body height (was sized for 4.5in before the header zone was properly accounted for). Co-Authored-By: Claude Sonnet 4.6 --- .../css/badge_layout_epson_4x6_fanfold.css | 22 +++++++++++++++++-- .../[badge_id]/ae_comp__badge_obj_view.svelte | 15 +++++++------ 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css b/src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css index 502252e3..beb9aa7a 100644 --- a/src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css +++ b/src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css @@ -34,9 +34,27 @@ /* outline: thick solid orange; */ } -/* Body area: 6in total − ~1in header − ~0.5in footer ≈ 4.5in for content */ +/* + * Header image zone: 624×232px at full 4in badge width → natural height ≈ 1.49in. + * Override Tailwind's max-h-[1.00in] to avoid cropping the bottom of the image. + * min-h-[.50in] from the component HTML is fine; leave it in place. + */ +[data-layout='badge_4x6_fanfold'] .badge_header { + max-height: 1.5in; +} + +/* + * Body area: 6in total − 1.5in header − 0.5in footer = 4.0in for name/title/affiliations. + * + * margin-top: 0 overrides the component-level mt-54 (≈2.25in). That margin was added + * for the PVC badge layout (badge_3.5x5.5_pvc) where a full-bleed background_image_path + * was used — the body needed to start below the background image's logo zone. For + * fanfold badges with a standalone header_path image and no background, mt-54 creates + * a large blank gap between the header and the attendee name. + */ [data-layout='badge_4x6_fanfold'] .badge_body { - max-height: 4.5in; + margin-top: 0; + max-height: 4.0in; } /* Outer wrapper: strip the default padding/gap so the outline hugs the badge. diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte index 642c5a28..e65094c0 100644 --- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte +++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte @@ -383,16 +383,17 @@ let fit_heights = $derived.by(() => { location: '0.5in' }; } else { - // Default: badge_4x6_fanfold — 4" × 6", most room + // Default: badge_4x6_fanfold — 4" × 6", single-sided with 1.5in header + // Body = 6in − 1.5in header − 0.5in footer = 4.0in base = { - grp_name_title: '2.5in', + grp_name_title: '2.2in', grp_name_title_flex: 'around', - name: '1.9in', - title: '0.7in', - grp_aff_loc: '1.9in', + name: '1.7in', + title: '0.65in', + grp_aff_loc: '1.8in', grp_aff_loc_flex: 'between', - affiliations: '1.3in', - location: '0.55in' + affiliations: '1.2in', + location: '0.5in' }; }