Keep the install and update nudges off the tab bar

In a Safari tab the "add to home screen" nudge sat on top of the tab bar
and "+ new date", so none of them could be tapped until you dismissed it.
The tab bar now publishes where it starts (measured to its top edge, so
the bezel under it counts), the nudges sit just above it, and they
publish their own height so the screen and "+ new date" move up to make
room. Dismissing gives the room back. The login screen, with no bar, is
unchanged.

The Safari smoke test now checks that nothing a nudge covers is what a
tap would hit, and that the room is released afterwards.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Kjubikstronk

scripts/safari-smoke.mjs

@@ -68,10 +68,29 @@ check(!hosts.some((h) => h.includes('fonts.g')), 'nothing fetched from Google Fo
 
 await page.screenshot({ path: join(OUT, '1-agenda-pink.png') })
 
-// In a Safari tab (not the home-screen app) the install nudge shows, and it
-// sits over the tab bar. Dismiss it the way a person would.
+// In a Safari tab (not the home-screen app) the install nudge shows. It used
+// to sit on top of the tab bar; nothing it covers should be what a tap hits.
 const later = page.getByRole('status').getByRole('button', { name: 'later' })
-if (await later.count()) await later.first().tap()
+if (await later.count()) {
+  const covered = await page.evaluate(() =>
+    [...document.querySelectorAll('nav button, button')]
+      .filter((b) => /^(calendar|map|all dates|\+ new date)$/i.test(b.textContent.trim()))
+      .filter((b) => {
+        const r = b.getBoundingClientRect()
+        const hit = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2)
+        return !b.contains(hit)
+      })
+      .map((b) => b.textContent.trim()),
+  )
+  check(covered.length === 0, 'install nudge covers no tab or "+ new date"', covered.join(', '))
+  await page.screenshot({ path: join(OUT, '1b-install-nudge.png') })
+  await later.first().tap()
+  await page.waitForTimeout(300)
+  const room = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue('--nudge-h').trim(),
+  )
+  check(room === '0px', 'dismissing it gives the room back', room)
+}
 
 // A tapped button must not stay sunk (sticky :hover on touch screens).
 const tab = page.getByRole('button', { name: /^calendar$/i })

src/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useState } from 'react'
+import { Suspense, lazy, useEffect, useRef, useState, type ReactNode } from 'react'
 import Boundary from './components/Boundary'
 import Device from './components/Device'
 import InstallPrompt from './components/InstallPrompt'
@@ -33,14 +33,46 @@ export default function App() {
           offerable even on the login screen, and neither carries any data
           dependencies. Stacked in one fixed container so they never overlap
           if both happen to be relevant at once. */}
-      <div className="safe-bottom pointer-events-none fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-sm flex-col items-stretch gap-2">
+      <Nudges>
         <UpdatePill />
         <InstallPrompt />
-      </div>
+      </Nudges>
     </AuthProvider>
   )
 }
 
+/**
+ * The update and install nudges, stacked so they never overlap each other.
+ *
+ * Fixed to the bottom, but not ON the tab bar: Home marks the page
+ * `data-dock` with the bar's height, and this publishes its own height as
+ * `--nudge-h` so Home can leave exactly that much room above the bar. On the
+ * login screen there is no bar and it simply sits at the bottom.
+ */
+function Nudges({ children }: { children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const root = document.documentElement
+    const ro = new ResizeObserver(() => {
+      // Plus a 0.5rem gap on each side; nothing at all when there's no nudge.
+      const h = el.childElementCount ? el.offsetHeight + 16 : 0
+      root.style.setProperty('--nudge-h', `${h}px`)
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+  return (
+    <div
+      ref={ref}
+      className="nudges pointer-events-none fixed inset-x-3 z-50 mx-auto flex max-w-sm flex-col items-stretch gap-2"
+    >
+      {children}
+    </div>
+  )
+}
+
 /**
  * The front door. Nothing below this renders — and no Firestore listener is
  * ever attached — until Firebase confirms a signed-in user, which is what

src/screens/Home.tsx

@@ -424,8 +424,10 @@ export default function Home() {
             className={[
               'pixel-btn pixel-btn-primary absolute right-3 z-20 px-4 py-3',
               'font-[family-name:var(--font-display)] text-base',
-              isWide ? 'bottom-3' : 'bottom-20',
+              isWide ? 'bottom-3' : '',
             ].join(' ')}
+            // Clear of the tab bar, and of a nudge sitting above it.
+            style={isWide ? undefined : { bottom: 'calc(5rem + var(--nudge-h, 0px))' }}
           >
             + new date
           </button>
@@ -457,23 +459,55 @@ function TabBar({ view, onChange }: { view: View; onChange: (v: View) => void })
     ['ideas', 'all dates'],
   ]
 
+  // Tell the update / install nudges where the tab bar is, so they sit above
+  // it instead of on top of it. In a Safari tab the install nudge used to
+  // cover all three tabs and "+ new date" until you dismissed it.
+  const navRef = useRef<HTMLElement>(null)
+  useEffect(() => {
+    const el = navRef.current
+    if (!el) return
+    const root = document.documentElement
+    // From the bottom of the viewport to the top of the bar — not the bar's
+    // own height, which leaves out the device bezel underneath it.
+    const measure = () =>
+      root.style.setProperty('--dock-h', `${window.innerHeight - el.getBoundingClientRect().top}px`)
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    window.addEventListener('resize', measure)
+    root.setAttribute('data-dock', '')
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', measure)
+      root.removeAttribute('data-dock')
+      root.style.removeProperty('--dock-h')
+    }
+  }, [])
+
   return (
-    <nav className="safe-bottom grid shrink-0 grid-cols-3 gap-1 border-t-[3px] border-[var(--color-line)] bg-[var(--color-paper)] p-1">
-      {tabs.map(([id, label]) => (
-        <button
-          key={id}
-          type="button"
-          onClick={() => onChange(id)}
-          aria-current={view === id ? 'page' : undefined}
-          className={[
-            'pixel-btn legend min-h-12 py-2',
-            view === id ? 'pixel-btn-primary' : '',
-          ].join(' ')}
-        >
-          {label}
-        </button>
-      ))}
-    </nav>
+    <>
+      {/* Room for the nudges, so they push the screen up rather than cover
+          it. Zero tall when there are none. */}
+      <div aria-hidden="true" className="shrink-0" style={{ height: 'var(--nudge-h, 0px)' }} />
+      <nav
+        ref={navRef}
+        className="safe-bottom grid shrink-0 grid-cols-3 gap-1 border-t-[3px] border-[var(--color-line)] bg-[var(--color-paper)] p-1"
+      >
+        {tabs.map(([id, label]) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => onChange(id)}
+            aria-current={view === id ? 'page' : undefined}
+            className={[
+              'pixel-btn legend min-h-12 py-2',
+              view === id ? 'pixel-btn-primary' : '',
+            ].join(' ')}
+          >
+            {label}
+          </button>
+        ))}
+      </nav>
+    </>
   )
 }
 

src/theme.css

@@ -258,6 +258,19 @@
     padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
   }
 
+  /* The update / install nudges. At the screen's bottom edge they respect the
+     home indicator; above the tab bar (`data-dock`, set by Home) the bar has
+     already done that, so they sit just over it with no extra padding. */
+  .nudges {
+    bottom: 0.75rem;
+    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
+  }
+
+  :root[data-dock] .nudges {
+    bottom: calc(var(--dock-h) + 0.5rem);
+    padding-bottom: 0;
+  }
+
   /* For a bar already pinned to the bottom edge: only the inset, no extra. */
   .safe-bottom {
     padding-bottom: max(0.25rem, env(safe-area-inset-bottom));