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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user