Badges: switch to transform-based print centering — fixes Firefox physical printer shift

tests/badge_print_layout.test.ts

@@ -177,33 +177,44 @@ test.describe('Badge Print Page — print layout centering', () => {
         ).toBeLessThan(5);
     });
 
-    test('#ae_main_content does not clip in print mode', async ({ page }) => {
-        // Verifies that overflow:visible is applied (the Firefox fix).
+    test('#ae_main_content is a full-page positioned block in print mode', async ({ page }) => {
+        // Verifies overflow:visible (overflow:auto fix) and position:relative (centering context).
         await page.goto(`/events/${event_id}/badges/${badge_id}/print`);
         await page.waitForLoadState('domcontentloaded');
         await page.emulateMedia({ media: 'print' });
 
-        const overflow = await page.evaluate(() => {
+        const styles = await page.evaluate(() => {
             const el = document.getElementById('ae_main_content');
-            return el ? getComputedStyle(el).overflow : null;
+            if (!el) return null;
+            const cs = getComputedStyle(el);
+            return { overflow: cs.overflow, position: cs.position };
         });
-        expect(overflow, '#ae_main_content overflow should be visible in print').toBe('visible');
+        expect(styles, '#ae_main_content must exist').not.toBeNull();
+        expect(styles!.overflow, '#ae_main_content overflow should be visible in print').toBe('visible');
+        expect(styles!.position, '#ae_main_content should be positioned (relative) in print').toBe('relative');
     });
 
-    test('body is a flex container spanning full viewport width in print mode', async ({ page }) => {
+    test('badge wrapper is absolutely positioned and centered in print mode', async ({ page }) => {
         await page.setViewportSize({ width: 816, height: 1056 });
 
         await page.goto(`/events/${event_id}/badges/${badge_id}/print`);
         await page.waitForLoadState('domcontentloaded');
+        await page.evaluate(inject_idb, [mock_badge, mock_template] as any);
+        await page.waitForSelector('.event_badge_wrapper', { timeout: 8000 });
         await page.emulateMedia({ media: 'print' });
 
-        const result = await page.evaluate(() => ({
-            display:  getComputedStyle(document.body).display,
-            width:    document.body.offsetWidth,
-        }));
-
-        expect(result.display, 'body should be flex in print').toBe('flex');
-        // Body width must be close to the viewport width (no shrink-to-content)
-        expect(result.width, 'body should span full viewport width').toBeGreaterThanOrEqual(810);
+        const styles = await page.evaluate(() => {
+            const el = document.querySelector('.event_badge_wrapper') as HTMLElement | null;
+            if (!el) return null;
+            const cs = getComputedStyle(el);
+            return {
+                position:  cs.position,
+                transform: cs.transform,
+            };
+        });
+        expect(styles).not.toBeNull();
+        expect(styles!.position, 'badge wrapper should be absolutely positioned').toBe('absolute');
+        // transform should contain a matrix (translate is set)
+        expect(styles!.transform, 'badge wrapper should have a transform applied').not.toBe('none');
     });
 });