From 6e4e2f3d0c1af30d460a4d276a24e88133b7dfa4 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 9 Sep 2026 13:16:53 +0200
Subject: [PATCH] fix(events): pin the sticky buy bar flush above the nav

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
---
 src/modules/events/views/EventDetailPage.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/modules/events/views/EventDetailPage.vue b/src/modules/events/views/EventDetailPage.vue
index d4d98dd..96280d7 100644
--- a/src/modules/events/views/EventDetailPage.vue
+++ b/src/modules/events/views/EventDetailPage.vue
@@ -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">