Ya/fix nimo nav

miniapps/navigation/miniapp.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@mentra/miniapp-cli/schema/miniapp.schema.json",
   "packageName": "com.mentra.navigation",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "name": "Mentra Maps",
   "description": "Turn-by-turn walking navigation with compass and Google Maps.",
   "icon": "icon.png",

miniapps/navigation/src/ui/components/Drawer/Drawer.tsx

@@ -200,7 +200,14 @@ function DrawerInner({
   }
 
   return (
-    <div className="fixed left-0 right-0 bottom-0 z-40 pointer-events-none">
+    // Lift the whole drawer above the Android 3-button nav bar. The host
+    // injects the bottom safe-area inset as `--mentra-safe-bottom` (0 on iOS /
+    // gesture nav). It's applied to the outer wrapper — NOT the measured card —
+    // so the peek/drag math (sheetHeight, peekOffset, published DrawerOffset)
+    // is unchanged; the map stays full-bleed behind everything.
+    <div
+      className="fixed left-0 right-0 bottom-0 z-40 pointer-events-none"
+      style={{paddingBottom: "var(--mentra-safe-bottom)"}}>
       <motion.div
         ref={sheetRef}
         drag="y"

miniapps/navigation/src/ui/components/Toast/Toast.tsx

@@ -39,7 +39,10 @@ export function ToastProvider({children}: {children: ReactNode}) {
             animate={{opacity: 1, y: 0}}
             exit={{opacity: 0, y: 16}}
             transition={{duration: 0.18, ease: "easeOut"}}
-            className="pointer-events-none fixed inset-x-0 bottom-10 z-[100] flex justify-center px-6">
+            // Sit above the Android 3-button nav bar: base 2.5rem (was
+            // `bottom-10`) + host-injected bottom inset (0 on iOS / gesture nav).
+            style={{bottom: "calc(2.5rem + var(--mentra-safe-bottom))"}}
+            className="pointer-events-none fixed inset-x-0 z-[100] flex justify-center px-6">
             <div className="rounded-full bg-black px-4 py-2.5 text-white text-[14px] font-medium [box-shadow:#00000033_0px_6px_20px] max-w-[90vw] text-center">
               {message}
             </div>

miniapps/navigation/src/ui/pages/NavigationPage/components/LocationSearch/LocationSearch.tsx

@@ -294,6 +294,10 @@ export function LocationSearch({selected, onSelect, onClear, disabled, devFrozen
               // <input> is exempt — browsers always allow selection
               // inside form controls so the user can still edit their
               // query normally.
+              // Full-bleed white panel (bg goes under the bars), but pad the
+              // scroll content so the last result clears the Android 3-button
+              // nav bar (host-injected inset; 0 on iOS / gesture nav).
+              style={{paddingBottom: "var(--mentra-safe-bottom)"}}
               className={`fixed z-40 inset-x-0 bottom-0 top-0 bg-white overflow-auto select-none [-webkit-touch-callout:none] [-webkit-user-select:none] ${safeHeadingSearchResults}`}>
               {loading ? (
                 <div className="flex items-center justify-center gap-2 px-3 py-8 text-neutral-500">

miniapps/navigation/src/ui/pages/NavigationPage/components/NavMap/NavMap.tsx

@@ -106,10 +106,16 @@ export function NavMap({
   const devEnabled = isDev || devOverride
 
   // Anchor the floating right-rail (zoom / recenter buttons) just above
-  // whichever drawer is currently mounted.
+  // whichever drawer is currently mounted, and above the Android 3-button nav
+  // bar (host-injected `--mentra-safe-bottom`; 0 on iOS / gesture nav). The
+  // same inset is applied to the drawers' outer wrappers, so this keeps the
+  // rail the same 12px above whichever drawer is up.
   const drawerOffset = useDrawerOffset()
   const fallbackZero = useMotionValue(0)
-  const railBottom = useTransform(drawerOffset ?? fallbackZero, (h: number) => h + 12)
+  const railBottom = useTransform(
+    drawerOffset ?? fallbackZero,
+    (h: number) => `calc(${h + 12}px + var(--mentra-safe-bottom))`,
+  )
 
   useEffect(() => {
     let alive = true

miniapps/navigation/src/ui/pages/NavigationPage/components/NavigationRunningDrawer/NavigationRunningDrawer.tsx

@@ -88,6 +88,11 @@ export function NavigationRunningDrawer({
           animate={{y: 0}}
           exit={{y: "100%"}}
           transition={{type: "spring", stiffness: 320, damping: 42}}
+          // Lift the running bar above the Android 3-button nav bar via the
+          // host-injected bottom inset (0 on iOS / gesture nav). On the outer
+          // wrapper so the measured bar height (published as DrawerOffset for
+          // the right-rail) is unaffected.
+          style={{paddingBottom: "var(--mentra-safe-bottom)"}}
           className="fixed left-0 right-0 bottom-0 z-40 pointer-events-none">
           <div ref={measureRef} className="[font-synthesis:none] pointer-events-auto mx-auto max-w-md flex items-center pt-4 pb-8.5 gap-2 bg-[#FFFFFFA6] border-t border-t-solid border-t-[#FFFFFF80] [backdrop-filter:blur(40px)_saturate(180%)] antialiased px-4 rounded-t-[28px]">
             <StatRow