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

Author	SHA1	Message	Date
Padreug	6e4e2f3d0c	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	2026-09-09 13:19:05 +02:00
Padreug	82f7e5659a	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	2026-09-09 13:19:05 +02:00

Author

SHA1

Message

Date

Padreug

6e4e2f3d0c

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

2026-09-09 13:19:05 +02:00

Padreug

82f7e5659a

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

2026-09-09 13:19:05 +02:00