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

padreug commented

2026-09-09 11:19:24 +00:00

Owner

Follow-up to #149, which merged before these two commits reached the branch. Fixes the gap under the sticky buy bar seen on demo on both phone and desktop.

Cause

The bar was rendered inside the page's space-y-6 column; Tailwind's child margin also offsets a position: fixed box, so the bar floated 24px above its bottom.
Its offset was hand-derived (3.5rem + env(safe-area-inset-bottom)), a second guess at the nav's height.

What

feat(layout): publish the bottom nav's rendered height as --bottom-nav-height — BottomNav measures itself (ResizeObserver) and writes the variable on <html>; index.css declares the 0px default. Anything pinned above the nav uses bottom: var(--bottom-nav-height). The restaurant item page's add-to-cart bar (existing precedent, which carried its own gap comment) is migrated to it. Cross-cutting change, committed first on its own.
fix(events): pin the sticky buy bar flush above the nav — the bar teleports to <body> (same as the shell's dialogs and toaster) and uses the variable.

vue-tsc -b clean; events + restaurant tests pass. Headless measurement on the Château du Faune event: bar bottom == nav top at 390×844 and 1280×900, zero gap; show/hide behaviour unchanged.

🤖 Generated with Claude Code

https://claude.ai/code/session_01ByAwHU4pRnyE58YocQvAas

Follow-up to #149, which merged before these two commits reached the branch. Fixes the gap under the sticky buy bar seen on demo on both phone and desktop. ## Cause - The bar was rendered inside the page's `space-y-6` column; Tailwind's child margin also offsets a `position: fixed` box, so the bar floated 24px above its `bottom`. - Its offset was hand-derived (`3.5rem + env(safe-area-inset-bottom)`), a second guess at the nav's height. ## What 1. `feat(layout): publish the bottom nav's rendered height as --bottom-nav-height` — `BottomNav` measures itself (ResizeObserver) and writes the variable on `<html>`; `index.css` declares the `0px` default. Anything pinned above the nav uses `bottom: var(--bottom-nav-height)`. The restaurant item page's add-to-cart bar (existing precedent, which carried its own gap comment) is migrated to it. Cross-cutting change, committed first on its own. 2. `fix(events): pin the sticky buy bar flush above the nav` — the bar teleports to `<body>` (same as the shell's dialogs and toaster) and uses the variable. `vue-tsc -b` clean; events + restaurant tests pass. Headless measurement on the Château du Faune event: bar bottom == nav top at 390×844 and 1280×900, zero gap; show/hide behaviour unchanged. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01ByAwHU4pRnyE58YocQvAas

padreug added 2 commits

2026-09-09 11:19:24 +00:00

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

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

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

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 merged commit b080d802c5 into dev

2026-09-09 11:19:47 +00:00

padreug deleted branch fix/events-sticky-bar-gap

2026-09-09 11:19:47 +00:00

padreug referenced this pull request from a commit

2026-09-09 11:19:48 +00:00

Merge pull request 'fix(events): pin the sticky buy bar flush above the nav (--bottom-nav-height)' (#150) from fix/events-sticky-bar-gap into dev