BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add iOS safe area support for PWA header

Browse Source 
Introduce CSS variables for safe-area in iOS PWA environments
Apply header padding based on safe-area top to header-safe-area element
This commit is contained in:
Bohdan Triapitsyn
2026-01-24 18:37:03 +02:00
parent 3e809e79b1
commit 1720a8d6fd
7 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/mobile.css
+15
View File
@@ -217,6 +217,21 @@
/* iOS PWA Adaptations */
/* iOS safe area defaults (applies to PWA + Safari) */
@supports (-webkit-touch-callout: none) {
:root.device-mobile:not(.desktop-runtime) {
--oc-safe-area-top: env(safe-area-inset-top, 0);
--oc-safe-area-right: env(safe-area-inset-right, 0);
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
--oc-safe-area-left: env(safe-area-inset-left, 0);
}
:root.device-mobile:not(.desktop-runtime) .header-safe-area {
padding-top: var(--oc-safe-area-top);
}
}
/* Phase 1: iOS PWA safe area handling - Enhanced positioning approach */
@media (display-mode: standalone) {
/* iOS-specific safe area handling with CSS variable support */