From a9a576081e8447ba5616d0311fff888745ec469e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 12 Apr 2026 19:41:17 +0200 Subject: [PATCH] Update spec with iOS safe area, responsive header, and mobile touch Added requirements for: - iOS safe area insets (notch, home indicator) - No accidental page zoom (viewport user-scalable=no) - Responsive header (hide secondary controls on mobile) Co-Authored-By: Claude Opus 4.6 (1M context) --- .../specs/elevation-map-interaction/spec.md | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md b/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md index a4bd198..eeea56b 100644 --- a/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md +++ b/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md @@ -50,3 +50,30 @@ The elevation chart SHALL support touch-based interaction on mobile devices. #### Scenario: No page scroll on touch - **WHEN** a user touches the elevation chart - **THEN** page scrolling is prevented (touch-none CSS + preventDefault) + +### Requirement: iOS safe area support +The Planner layout SHALL respect iOS safe area insets. + +#### Scenario: Notch/Dynamic Island clearance +- **WHEN** the Planner is viewed on an iOS device with a notch or Dynamic Island +- **THEN** the header bar is padded below the safe area inset + +#### Scenario: Home indicator clearance +- **WHEN** the Planner is viewed on an iOS device without a physical home button +- **THEN** the elevation chart area is padded above the home indicator + +#### Scenario: No accidental page zoom +- **WHEN** a user pinches on the Planner UI +- **THEN** the browser-level page zoom does not trigger (viewport user-scalable=no) + +### Requirement: Responsive mobile header +The Planner header SHALL adapt to small screens by hiding secondary controls. + +#### Scenario: Small screen header +- **WHEN** the Planner is viewed on a mobile device +- **THEN** only the profile selector and export button are visible +- **AND** participant list, undo/redo, connection status, and computing text are hidden + +#### Scenario: Desktop header +- **WHEN** the Planner is viewed on a desktop screen +- **THEN** all header controls are visible