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 c710b740..78f34a80 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
@@ -469,7 +469,7 @@ $effect(() => {
          Print: #badge_render_area CSS applies display:contents to dissolve the badge wrapper;
          .event_badge_wrapper uses position:fixed to center on the @page — the row div
          becomes an empty block in print, which is harmless. -->
-    <div class="flex w-full flex-col items-start gap-4 lg:flex-row">
+    <div class="flex w-full flex-col items-center gap-4 lg:flex-row lg:items-start lg:justify-center">
 
         <!-- Badge column: natural print size, never shrinks. -->
         <div id="badge_render_area" class="shrink-0">
@@ -488,12 +488,12 @@ $effect(() => {
                 {name_two_lines} />
         </div>
 
-        <!-- Controls column: takes all remaining space next to the badge.
-             Sticky on large screens so controls stay visible while scrolling.
-             Stacks below the badge on tablet/phone. Never prints. -->
-        <div class="w-full min-w-0 flex-1 overflow-hidden
+        <!-- Controls column: max-w-sm (384px) keeps the panel a readable width without
+             stretching. On mobile: full width below the badge. Never prints. -->
+        <div class="w-full min-w-0 overflow-hidden
                     rounded-lg border border-gray-200 dark:border-gray-700
                     bg-white dark:bg-zinc-900 shadow-sm
+                    lg:w-auto lg:flex-1 lg:max-w-sm
                     lg:sticky lg:top-4 lg:self-start
                     lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto
                     print:hidden">