Context
Sticky navigation, sheets, dialogs, and bottom actions need predictable behavior
on notched devices while compact desktop controls still require usable touch targets.
Scope
- Add semantic safe-area inset utilities for top, right, bottom, and left.
- Add a utility for a minimum 44×44px hit area without forcing larger visuals.
- Apply utilities to shared mobile overlays and navigation examples.
- Document when compact controls may use expanded invisible hit areas.
Acceptance criteria
- Utilities use
env(safe-area-inset-*) with zero-safe fallbacks.
- Expanded hit areas do not overlap neighboring controls.
- Keyboard focus outline follows the visible control.
- Gallery fixtures cover portrait, landscape, and bottom-fixed actions.
- Playwright tests verify representative mobile layout bounds.
Out of scope
- Redesigning individual product pages.
- Device-specific JavaScript detection.
Context
Sticky navigation, sheets, dialogs, and bottom actions need predictable behavior
on notched devices while compact desktop controls still require usable touch targets.
Scope
Acceptance criteria
env(safe-area-inset-*)with zero-safe fallbacks.Out of scope