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 (--bottom-nav-height) #150

Merged
padreug merged 2 commits from fix/events-sticky-bar-gap into dev 2026-09-09 11:19:47 +00:00
Conversation 0 Commits 2 Files changed 4 +11 -5
1 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6e4e2f3d0c - Show all commits

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

Prev Next 
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
Padreug 2026-09-09 13:16:53 +02:00
commit 6e4e2f3d0c

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

@ -451,8 +451,13 @@ function goToMyTickets() {
@update:is-open="showReturnDialog = $event" @update:is-open="showReturnDialog = $event"
/> />
<!-- Sticky buy bar — see showStickyCta. Sits above the bottom nav <!-- Sticky buy bar — see showStickyCta. Pinned flush above the
(h-14 + safe-area inset) and mirrors the inline CTA. --> 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 <Transition
enter-active-class="transition duration-200 ease-out" enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-4 opacity-0" enter-from-class="translate-y-4 opacity-0"
@ -460,9 +465,9 @@ function goToMyTickets() {
leave-to-class="translate-y-4 opacity-0" leave-to-class="translate-y-4 opacity-0"
> >
<div <div
v-if="showStickyCta" v-if="showStickyCta && event"
class="fixed left-0 right-0 z-40 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80" class="fixed inset-x-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))" style="bottom: var(--bottom-nav-height)"
role="region" role="region"
:aria-label="t('events.detail.tickets')" :aria-label="t('events.detail.tickets')"
> >
@ -497,6 +502,7 @@ function goToMyTickets() {
</div> </div>
</div> </div>
</Transition> </Transition>
</Teleport>
<!-- External references --> <!-- External references -->
<div v-if="event.tags.length > 0" class="space-y-2"> <div v-if="event.tags.length > 0" class="space-y-2">