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>
This commit is contained in:
Scott Idem
2026-06-02 19:44:16 -04:00
parent e2d3c5a822
commit be3e56eece

View File

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