aiolabs/webapp
9
0
Fork 0
Code Issues 70 Pull requests Projects Releases Packages Wiki Activity Actions

fix(events): pin the sticky buy bar flush above the nav

Browse source 
Two causes of the visible gap under the bar on phone and desktop: the
bar lived inside the page's `space-y-6` column, whose child margin also
offsets a fixed box (24px), and its bottom offset was hand-derived. It
now teleports to <body> and uses `--bottom-nav-height`. Measured in a
headless run: bar bottom == nav top on 390px and 1280px viewports.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ByAwHU4pRnyE58YocQvAas
This commit is contained in:
Padreug 2026-09-09 13:16:53 +02:00
commit 6e4e2f3d0c
1 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/modules/events/views/EventDetailPage.vue
View file

@ -451,8 +451,13 @@ function goToMyTickets() {
@update:is-open="showReturnDialog = $event"
/>
<!-- Sticky buy bar — see showStickyCta. Sits above the bottom nav
(h-14 + safe-area inset) and mirrors the inline CTA. -->
<!-- Sticky buy bar — see showStickyCta. Pinned flush above the
bottom nav via the height it publishes (--bottom-nav-height,
BottomNav.vue) and mirrors the inline CTA. -->
<!-- Teleported to <body>: inside the page the bar would inherit the
parent's space-y margin (margins offset fixed boxes too) and
float 24px above the nav. -->
<Teleport to="body">
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-4 opacity-0"
@ -460,9 +465,9 @@ function goToMyTickets() {
leave-to-class="translate-y-4 opacity-0"
>
<div
v-if="showStickyCta"
class="fixed left-0 right-0 z-40 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80"
style="bottom: calc(3.5rem + env(safe-area-inset-bottom))"
v-if="showStickyCta && event"
class="fixed inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80"
style="bottom: var(--bottom-nav-height)"
role="region"
:aria-label="t('events.detail.tickets')"
>
@ -497,6 +502,7 @@ function goToMyTickets() {
</div>
</div>
</Transition>
</Teleport>
<!-- External references -->
<div v-if="event.tags.length > 0" class="space-y-2">