bug: mobile nav drawer — active highlight anomaly on last item + missing safe-area padding

[cameronsjo]

Problem

The mobile nav drawer shows anomalous behavior at the bottom of the list: the last visible item ("Disclosure") carries the active/selected highlight (left accent border + accent text) in contexts where it should not be active, and the bottom of the drawer may overlap with the device's system UI chrome (home indicator bar) on iOS.

Evidence

Screenshot at 440×956 shows "Disclosure" with the accent left-border highlight when the active page is the landing/overview content (visible behind the drawer). This suggests the active-state derivation is selecting the last item by default or via a scroll-position misdetection.

Additionally, the drawer appears to extend edge-to-edge to the bottom without accounting for env(safe-area-inset-bottom), which clips interactive area on iPhone home-indicator models.

Suggested Fix

1. Active state: audit the nav item activation logic — confirm it derives from current route/URL, not from scroll position or list index. The last item should only highlight when its target is the active page.
2. Safe area: add padding-bottom: env(safe-area-inset-bottom) (or equivalent token) to the drawer's inner scroll container so the last item is reachable above the home indicator.

Confidence: active-state is a likely candidate; safe-area is a standard iOS fix.

Labels

bug, mobile, ios