Replaces the floating pill nav with persistent mobile chrome that
frames scrolling content the way iOS/Android native apps do.
New components:
- TopBar: brand left, contextual action right (Admin pill for admins,
bell for saved, Login button when logged out)
- BottomNav: 4-tab fixed nav (Search, Scan [elevated center FAB],
Saved, Profile). Saved/Profile disabled when logged out, tapping
opens LoginModal
- icons.jsx: 5 stroke-based SVG icons (Search, Scan, Bell, User, Cog)
plus Logo; replaces emoji in nav chrome
Behavior changes:
- App.jsx: tracks publicScreen ('home'|'scan'|'search') so BottomNav
can drive both top-level view + inner screen
- PublicView: screen state lifted to App via props (back-compat
defaults preserved so existing call sites don't break)
- App.css: old mobile .view-switcher block hidden (replaced by
BottomNav); .app padding bumped to clear the fixed bottom bar
Desktop (>768px) unchanged — existing centered pill nav still works,
new components hidden via display:none.
Co-Authored-By: Claude <noreply@anthropic.com>
Root cause: html/body had no height/overflow constraint, so the
webview allowed rubber-band overscroll. .app used min-height: 100vh
which on iOS resolves to the larger viewport (behind URL bar), causing
layout to reflow when the bar collapses.
- index.css: html/body locked to 100% height, overflow hidden,
overscroll-behavior none; #root set to exact 100dvh
- App.css: .app height: 100dvh (was min-height: 100vh) with
overflow-y: auto + overscroll-behavior: contain so the .app
becomes the scroll container
- capacitor.config.json: ios.bounces false, contentInset never
Co-Authored-By: Claude <noreply@anthropic.com>
Ichitux