From 82f7e5659a50531ff7030e69c87fea754ce5b2f1 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 9 Sep 2026 13:16:53 +0200
Subject: [PATCH 1/2] feat(layout): publish the bottom nav's rendered height as
 --bottom-nav-height

BottomNav measures itself (ResizeObserver) and writes
`--bottom-nav-height` on <html>; index.css declares the 0px default. Any
element that must sit flush above the nav pins with
`bottom: var(--bottom-nav-height)` instead of re-deriving
`3.5rem + env(safe-area-inset-bottom)` and drifting when the device's
inset, border or font scaling differs from that guess. The restaurant
item page's add-to-cart bar is migrated to it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ByAwHU4pRnyE58YocQvAas
---
 src/assets/index.css                      |  4 ++++
 src/components/layout/BottomNav.vue       | 19 +++++++++++++++++++
 src/modules/restaurant/views/ItemPage.vue |  9 ++++-----
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index d4da37b..990e6ee 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -96,6 +96,10 @@
 /* Default palette: Catppuccin (Latte for light, Mocha for dark).
    Other palettes are scoped via :root[data-theme="<name>"] in themes/*.css. */
 :root {
+  /* Rendered height of the fixed BottomNav (h-14 + safe-area + border), kept
+     current by BottomNav.vue. Pin anything that must sit flush above the nav
+     with `bottom: var(--bottom-nav-height)`; 0 when no nav is mounted. */
+  --bottom-nav-height: 0px;
   --background: oklch(0.9578 0.0058 264.5321);
   --foreground: oklch(0.4355 0.0430 279.3250);
   --card: oklch(1.0000 0 0);
diff --git a/src/components/layout/BottomNav.vue b/src/components/layout/BottomNav.vue
index e23fd98..465437c 100644
--- a/src/components/layout/BottomNav.vue
+++ b/src/components/layout/BottomNav.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Component } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
 
 export interface BottomTab {
   /** Translated label shown under the icon. */
@@ -33,6 +35,22 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// Publish the nav's rendered height (h-14 + safe-area padding + border,
+// whatever the device makes of it) as `--bottom-nav-height` on <html>, so
+// anything that needs to sit flush above the nav — sticky action bars,
+// toasts — can use `bottom: var(--bottom-nav-height)` instead of
+// re-deriving the CSS and drifting when insets or font scaling differ.
+const navRef = ref<HTMLElement | null>(null)
+function publishHeight() {
+  const h = navRef.value?.getBoundingClientRect().height ?? 0
+  document.documentElement.style.setProperty('--bottom-nav-height', `${Math.round(h)}px`)
+}
+useResizeObserver(navRef, publishHeight)
+onMounted(publishHeight)
+onBeforeUnmount(() => {
+  document.documentElement.style.setProperty('--bottom-nav-height', '0px')
+})
+
 const router = useRouter()
 
 function onTabClick(tab: BottomTab) {
@@ -51,6 +69,7 @@ function isTabActive(tab: BottomTab): boolean {
 
 <template>
   <nav
+    ref="navRef"
     class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
     style="padding-bottom: env(safe-area-inset-bottom)"
   >
diff --git a/src/modules/restaurant/views/ItemPage.vue b/src/modules/restaurant/views/ItemPage.vue
index 3342a57..bc059cc 100644
--- a/src/modules/restaurant/views/ItemPage.vue
+++ b/src/modules/restaurant/views/ItemPage.vue
@@ -198,13 +198,12 @@ function back() {
       </section>
 
       <!-- Sticky bottom bar with qty stepper + add-to-cart.
-           Sits flush above BottomNav (h-14 + safe-area inset) on every
-           breakpoint. Previously `bottom-16` left an 8px gap on mobile
-           (BottomNav is h-14 = 56px, not 64px), and `sm:bottom-0` made
-           it overlap the nav on desktop. -->
+           Sits flush above BottomNav on every breakpoint via the height
+           the nav publishes (--bottom-nav-height, BottomNav.vue) — no
+           hand-derived h-14 + safe-area arithmetic to drift. -->
       <div
         class="fixed inset-x-0 z-20 border-t border-border bg-background/95 px-4 py-3 backdrop-blur"
-        style="bottom: calc(3.5rem + env(safe-area-inset-bottom))"
+        style="bottom: var(--bottom-nav-height)"
       >
         <div class="container mx-auto flex max-w-2xl items-center gap-3">
           <div class="inline-flex items-center rounded-full border border-border bg-card">
-- 
2.55.0


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 2/2] 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">
-- 
2.55.0