# ADR-002: Every PWA Must Link shared/safe-bottom.css ## Status Accepted, 2026-06-25. ## Status History ```yaml status_history: - date: 2026-06-25 status: Proposed changed_by: hkl reason: Formalising rule already adopted across 19 PWAs changed_via: adr-kit (360lm) - date: 2026-06-25 status: Accepted changed_by: hkl reason: No exceptions; 19 PWAs already compliant changed_via: adr-kit (360lm) ``` ## Context Mobile browsers (especially iOS Safari) render a sticky navigation bar at the bottom of the screen. Content positioned at the bottom of a page can be hidden underneath this bar. Multiple 360lm PWAs had sticky bottom action buttons and form footers that were unreachable on mobile devices. A shared CSS helper was built at `/shared/safe-bottom.css` that uses `padding-bottom: max(env(safe-area-inset-bottom), )` so existing padding is never reduced — only extended when the device needs it. 19 PWAs have already adopted this. ## Decision Every PWA (new and existing) MUST include `` in its ``. No PWA may use inline `padding-bottom` on sticky bottom elements without first including this stylesheet. **Decision Maker:** hkl ## Alternatives Considered - **Inline the safe-area CSS in each PWA.** Rejected: 20 PWAs × repeated code = drift risk; a single shared file ensures consistency and allows future updates in one place. - **Apply safe-bottom only to PWAs that have sticky bottom bars.** Rejected: the stylesheet is a no-op on desktop and on mobile without sticky elements — zero cost to include universally; conditional inclusion creates a checklist item that gets missed. - **Use JavaScript to detect and apply padding dynamically.** Rejected: CSS `env(safe-area-inset-bottom)` is the platform-native solution; JS adds complexity and a flash-of-unstyled-content risk. ## Consequences **Positive:** - Content never hidden behind sticky bottom bars on any device. - Single source of truth — one file update covers all PWAs. - Uses `max()` so existing padding is preserved, never shrunk. **Negative / Trade-offs:** - New PWA developers must know to include this link; not auto-applied. - One extra HTTP request per PWA load (negligible — file is tiny, cached by SW). **Risks and mitigations:** - If `/shared/safe-bottom.css` path changes, all 20 PWAs break — mitigated: path is stable and served from the root, not versioned. ## Related Decisions - ADR-003 (mobile scroll pattern) — companion rule for mobile layout. ## References - `memory/feedback_safe_bottom.md` — original rule capture - `/var/www/360lm/shared/safe-bottom.css` — the file itself