From be3e56eece0f161f9908bf3dfe8f9ee885b52553 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 2 Jun 2026 19:44:16 -0400
Subject: [PATCH] fix(badges): cap controls panel width and center
 badge+controls pair

- Controls column: max-w-sm (384px) prevents flex-1 from consuming all
  remaining horizontal space on wide screens
- Row wrapper: justify-center + items-center centers the badge+controls
  pair in the available width (equal margins on both sides)
- Mobile: full-width stacked layout unchanged; badge centered via items-center

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../(badges)/badges/[badge_id]/print/+page.svelte      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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">