Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Badges: fix Firefox print centering (overflow:auto+display:contents); add print layout Playwright tests

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 17:58:33 -04:00
parent 5ef66af98d
commit bc23e8a399
2 changed files with 237 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte
View File

@@ -188,16 +188,31 @@
/* Hide app chrome */
.submenu { display: none !important; }
/* 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.
/* Dissolve layout wrappers so .event_badge_wrapper bubbles up to a real
centering flex container.
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,
#ae_main_content has overflow:auto — per CSS spec, display:contents
cannot override an element that establishes overflow clipping; Firefox
(spec-compliant) keeps it as a block container, breaking centering.
Fix: reset it as an explicit 100%×100% pass-through flex container
instead. Chrome applies this too (belt-and-suspenders). */
#ae_main_content {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
overflow: visible !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* .main_content and #badge_render_area have no overflow constraints,
so display:contents works on all browsers — they dissolve their boxes
and .event_badge_wrapper becomes a direct flex child of #ae_main_content. */
.main_content,
#badge_render_area {
display: contents !important;
@@ -221,8 +236,6 @@
/* ============================================================
TEMPORARY DEBUG OUTLINES — remove before going live
Each color = one layout layer so you can see what's taking
up space and whether display:contents is actually dissolving.
============================================================ */
html {
outline: 3px dashed lime !important;
@@ -232,12 +245,13 @@
outline: 4px solid blue !important;
outline-offset: -4px !important;
}
/* Red = should be invisible (display:contents dissolves its box).
If you see a red border, display:contents is NOT working here. */
/* Red = #ae_main_content — now a real flex container (full width/height).
Should be VISIBLE and same size as body. */
#ae_main_content {
outline: 3px dashed red !important;
outline-offset: -6px !important;
}
/* Orange + purple = display:contents — should be INVISIBLE (no box). */
.main_content {
outline: 3px dashed orange !important;
outline-offset: -9px !important;
@@ -246,7 +260,7 @@
outline: 3px dashed purple !important;
outline-offset: -12px !important;
}
/* Cyan = the actual badge wrapper — should be the only visible box */
/* Cyan = the actual badge — should be centered inside the red box */
.event_badge_wrapper {
outline: 3px solid cyan !important;
outline-offset: 2px !important;