Add CSS environment variables for safe-area-inset to prevent content
overlap with notch/home indicator on iOS devices.
Changes:
- expert.css: Add safe area support to body, scene container, and
simple-quick-actions (hamburger menu) navigation
- quick-actions.css: Add safe area support to context menu and
follow-mode-indicator
- panels.css: Add safe area support to toast-container
- troubleshoot.css: Add safe area support to spaxel-dismiss-all
The viewport-fit=cover meta tag was already present in index.html.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Cap devicePixelRatio at 2.0 on screens < 1024px width
- Disable MSAA antialiasing on mobile devices
- Disable shadow maps on mobile devices
- Add frame rate capping at 30fps for struggling mobile devices
- Auto-detect low FPS and adjust frame rate accordingly
- Panel close buttons: expanded from 32x32px to 44x44px
- Slider controls: expanded drag targets to 44px height with 32px thumb
- Toggle switches: expanded to 44px minimum height
- Checkboxes: expanded touch area with pseudo-element to 44x44px
- Context menu items: minimum 44px height
- Link list entries: minimum 44px height
- All buttons: minimum 44x44px touch targets
- Small buttons use expanded padding to maintain appearance while meeting 44px requirement
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add expert.css for expert mode specific styles
- Improve mobile orientation change handling with visualViewport API support
- Add iOS Safari visual viewport resize handling for better mobile experience
- Add getViewportDimensions() function preferring visualViewport API
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
