diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte index 429c5513..43b81e74 100644 --- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte +++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte @@ -785,7 +785,7 @@ .field-card--active { border-color: rgb(99 102 241 / 0.45); /* indigo-500, muted */ box-shadow: - 0 0 0 3px rgb(99 102 241 / 0.18), /* soft outer glow — the "zoom ring" */ + 0 0 0 3px rgb(99 102 241 / 0.18), /* soft outer glow */ 0 4px 14px rgb(0 0 0 / 0.11); /* elevation shadow */ } :global(.dark) .field-card--active { @@ -821,6 +821,25 @@ overflow: hidden; } + /* ---- Active card: scale up value text and form inputs for accessibility ---- + Physical font-size increase (not transform: scale) so touch targets and text + genuinely get larger — benefits all users, not just visual appearance. + Transition on font-size animates the magnification smoothly. + ~150% of text-sm (0.875rem) = 1.3rem for the value display line. + Form inputs go to 1.05rem — larger but still contained in the 240px form width. */ + .flex-1 > p:not(.field-label) { + transition: font-size 180ms ease-out, line-height 180ms ease-out; + } + .field-card--active .flex-1 > p:not(.field-label) { + font-size: 1.3rem; + line-height: 1.3; + } + .field-card--active .ctrl-accordion-inner input, + .field-card--active .ctrl-accordion-inner textarea, + .field-card--active .ctrl-accordion-inner select { + font-size: 1.05rem; + } + /* ---- Entrance animation for form content ---- Triggered each time .open is applied to the parent accordion. Pairs with the height animation: content fades + zooms in from 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 1b3af299..dd808201 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 @@ -107,6 +107,12 @@ // value on every keystroke. The badge render merges it over the saved badge // object so the user can see changes as they type, before saving. let preview_overrides: Record | null = $state(null); + + // When any field is being edited, widen the controls panel (w-64 → w-80) + // and adjust the badge area margin to match. The panel is fixed right-0 so + // growing its width expands it leftward into the badge area automatically. + // transition-all on both elements makes the layout shift smooth. + let is_editing = $derived(preview_overrides !== null); @@ -244,9 +250,10 @@ -
+
-
+ bg-white dark:bg-zinc-900 p-2 + transition-all duration-200" + class:w-80={is_editing} + class:w-64={!is_editing}>