[ionic migration] fix navbar and button spacing

[sahilc0]

im unable to fix the excess bottom spacing on ios PWA, beneath the navbar and buttons

[arkanaai]

Codebase Context

The relevant files are:

• src/components/ButtonsOnBottom.tsx — IonFooter with ion-padding + buttons-on-bottom class
• src/ionic.css (lines 235–240) — CSS rules for .buttons-on-bottom footer padding and ion-content bottom clearance
• src/index.css (lines 249–251, 326–329) — .pill-navbar and .pill-navbar-haze bottom positioning

Likely Cause

Two suspects for the double-bottom-spacing on iOS PWA:

1. IonFooter double-counting safe-area — ButtonsOnBottom applies the ion-padding class (adds 16px all sides) and the CSS rule overrides padding-bottom to calc(16px + env(safe-area-inset-bottom)). Ionic's IonFooter may already handle safe-area internally in some versions, causing the inset to be applied twice.

2. Hidden IonTabBar adding dead space — In App.tsx the ion-tab-bar is hidden (opacity 0, pointer-events none) but remains in the DOM with height: var(--pill-navbar-spacer) (= 80px + safe-area-inset-bottom). On iOS PWA this phantom element may still push layout/viewport bottom.

---

Acceptance Criteria

• No visible extra whitespace below the pill navbar on iOS PWA (iPhone with home indicator)
• No visible extra whitespace below bottom-action buttons (ButtonsOnBottom) on iOS PWA
• Safe-area inset is applied exactly once — neither clipped (content hidden behind home indicator) nor doubled
• Behaviour is unchanged on Android and desktop browsers
• Dark mode visual parity (haze gradient still correct)

---

Suggested Approach

1. Audit IonFooter safe-area — Check if Ionic's IonFooter already injects padding-bottom: env(safe-area-inset-bottom) via its shadow DOM. If so, remove the explicit override in ionic.css line 236 and let Ionic handle it, or switch ButtonsOnBottom to a plain <footer> element to take full control.

2. Test the hidden IonTabBar — Temporarily add display: none (vs current opacity/pointer-events hide) to see if the phantom height goes away. If confirmed, replace the visibility hack with display: none or remove the element and manage tab routing state differently.

3. pill-navbar-haze negative bottom — calc(env(safe-area-inset-bottom, 0px) - 12px) goes negative when safe-area is 0; probably not the spacing bug but worth a sanity check.