Safe areas #26818
Description
Description
Continuation of #25566
Referenced in:
- New app ignored selected theme on top row android#5678
- Support missing safe areas #25566
- Edge to edge support for webviews android#5346
PRs/Branches:
- Safe area: main content and onboarding #26813
- Safe area: dialogs #26814
- Safe area: bars #26816
- Safe area: sidebar and notification drawer #26853
- Fix hass-subpage toolbar position #27003
- Safe area: containers and panels #26971
- Update safe areas for dialogs #27008
- Add safe areas to bottom sheets and sidebar #27009
- Safe area: devtools #26969
- Safe area: Fix double padding for sidebar #27078
- Automation sidebar bottom fade and safe area fixes #27135
- Fix safe padding for bottom sheet and add scroll lock #27165
These branches may need revisiting later on, or can be dropped if they are implemented above:
- feature/safe-area-subpage
- feature/safe-area-tabs-and-data-table - may contain duplicate code from Safe area: dialogs #26814 and Safe area: bars #26816
- feature/safe-area-lovelace-root
- feature/safe-area-config-and-devtools - depends on Safe area: main content and onboarding #26813 (need to verify)
Will focus on these in order, and make changes as needed. Ideal path is to keep the frontend side mostly unchanged and allow overrides from mobile app using css variables.
Styles set for testing in main.globals.ts:
--app-safe-area-inset-top: 64px;
--app-safe-area-inset-bottom: 36px;
--app-safe-area-inset-left: 48px;
--app-safe-area-inset-right: 24px;Known real safe areas:
Android (Pixel 10) - Nav bar height only:
--app-safe-area-inset-bottom: 36px;Android (Pixel 10) - Landscape (left):
--app-safe-area-inset-bottom: 36px;
--app-safe-area-inset-left: 68px;Android (Pixel 10) - Landscape (right):
--app-safe-area-inset-bottom: 36px;
--app-safe-area-inset-right: 68px;Checklist per-panel/section:
- Loading/Onboarding
- Dialogs
- Bars (toolbars, app bars)
- Sidebar
- Dashboards
- Home
- Areas
- Custom
- Map
- History
- Logbook/Activity
- Calendar
- Todo
- Media
- Energy
- Setup
- Dashboard
- Devtools
- Profile
- Settings
- Settings -> HA Cloud
- Settings -> Devices/Services -> Integrations
- Settings -> Devices/Services -> Integrations -> Integration
- Settings -> Devices/Services -> Application Credentials
- Settings -> Devices/Services -> Devices
- Settings -> Devices/Services -> Device
- Settings -> Devices/Services -> Entities
- Settings -> Devices/Services -> Helpers
- Settings -> Automatons
- Settings -> Automatons -> Editor
- Settings -> Automatons -> Editor -> Sidebar (Right/Bottom)
- Settings -> Scenes
- Settings -> Scenes -> Editor
- Settings -> Scripts
- Settings -> Scripts -> Editor
- Settings -> Automatons -> Editor -> Sidebar (Right/Bottom)
- Settings -> Blueprints
- Settings -> Areas
- Settings -> Areas -> Area (editor)
- Settings -> Areas -> Labels
- Settings -> Areas -> Zones
- Settings -> Voice Assistants
- Settings -> Tags
- Settings -> People
- Settings -> System
- Settings -> System -> *
- Settings -> About
- Settings -> Addons (ha-panel-custom)
- List
- Add
- Configure
- Addon panels (ha-panel-custom)