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 +27 -5
3 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 82f7e5659a - Show all commits

feat(layout): publish the bottom nav's rendered height as --bottom-nav-height

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

4
src/assets/index.css
View file

@ -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);

19
src/components/layout/BottomNav.vue
View file

@ -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)"
>

9
src/modules/restaurant/views/ItemPage.vue
View file

@ -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">