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
bun.lock
+9 -9
View File
@@ -32,7 +32,7 @@
"@ibm/plex": "^6.4.1",
"@lezer/highlight": "^1.2.3",
"@octokit/rest": "^22.0.1",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -95,7 +95,7 @@
},
"packages/desktop": {
"name": "@openchamber/desktop",
"version": "1.5.6",
"version": "1.5.7",
"dependencies": {
"@openchamber/ui": "workspace:*",
"@tauri-apps/plugin-notification": "^2.3.3",
@@ -118,7 +118,7 @@
},
"packages/ui": {
"name": "@openchamber/ui",
"version": "1.5.6",
"version": "1.5.7",
"dependencies": {
"@codemirror/autocomplete": "^6.20.0",
"@codemirror/commands": "^6.10.1",
@@ -148,7 +148,7 @@
"@fontsource/ibm-plex-sans": "^5.1.1",
"@ibm/plex": "^6.4.1",
"@lezer/highlight": "^1.2.3",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"@pierre/diffs": "^1.0.5",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
@@ -212,10 +212,10 @@
},
"packages/vscode": {
"name": "openchamber",
"version": "1.5.6",
"version": "1.5.7",
"dependencies": {
"@openchamber/ui": "workspace:*",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"adm-zip": "^0.5.16",
"jsonc-parser": "^3.3.1",
"react": "^19.1.1",
@@ -235,7 +235,7 @@
},
"packages/web": {
"name": "@openchamber/web",
"version": "1.5.6",
"version": "1.5.7",
"bin": {
"openchamber": "./bin/cli.js",
},
@@ -244,7 +244,7 @@
"@fontsource/ibm-plex-sans": "^5.1.1",
"@ibm/plex": "^6.4.1",
"@octokit/rest": "^22.0.1",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -860,7 +860,7 @@
"@openchamber/web": ["@openchamber/web@workspace:packages/web"],
"@opencode-ai/sdk": ["@opencode-ai/sdk@1.1.19", "", {}, "sha512-XhZhFuvlLCqDpvNtUEjOsi/wvFj3YCXb1dySp+OONQRMuHlorNYnNa7P2A2ntKuhRdGT1Xt5na0nFzlUyNw+4A=="],
"@opencode-ai/sdk": ["@opencode-ai/sdk@1.1.34", "", {}, "sha512-ToR20PJSiuLEY2WnJpBH8X1qmfCcmSoP4qk/TXgIr/yDnmlYmhCwk2ruA540RX4A2hXi2LJXjAqpjeRxxtLNCQ=="],
"@pierre/diffs": ["@pierre/diffs@1.0.5", "", { "dependencies": { "@shikijs/core": "^3.0.0", "@shikijs/engine-javascript": "^3.0.0", "@shikijs/transformers": "^3.0.0", "diff": "8.0.2", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-QcFhO6BW1Zz3BP+WFuH1tO2DjFJY5Sb6NmRjmEoVeEu1AVOd3HoUEFTnztxgxn+2c2ZFyFZP+6T4X/g8LDuZLw=="],
package.json
+1 -1
View File
@@ -85,7 +85,7 @@
"@ibm/plex": "^6.4.1",
"@lezer/highlight": "^1.2.3",
"@octokit/rest": "^22.0.1",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
packages/desktop/src-tauri/Cargo.lock
Generated
+1 -1
View File
@@ -2977,7 +2977,7 @@ dependencies = [
[[package]]
name = "openchamber-desktop"
version = "1.5.6"
version = "1.5.7"
dependencies = [
"anyhow",
"axum",
packages/ui/package.json
+1 -1
View File
@@ -39,7 +39,7 @@
"@fontsource/ibm-plex-sans": "^5.1.1",
"@ibm/plex": "^6.4.1",
"@lezer/highlight": "^1.2.3",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"@pierre/diffs": "^1.0.5",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
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 */
packages/vscode/package.json
+1 -1
View File
@@ -224,7 +224,7 @@
},
"dependencies": {
"@openchamber/ui": "workspace:*",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"adm-zip": "^0.5.16",
"jsonc-parser": "^3.3.1",
"react": "^19.1.1",
packages/web/package.json
+1 -1
View File
@@ -26,7 +26,7 @@
"@fontsource/ibm-plex-sans": "^5.1.1",
"@ibm/plex": "^6.4.1",
"@octokit/rest": "^22.0.1",
"@opencode-ai/sdk": "^1.1.19",
"@opencode-ai/sdk": "^1.1.34",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",