kai/web-terminal
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(ios): safe-area-inset clearance so tab-bar/key-bar don't obscure terminal

Browse Source 
viewport-fit=cover spans the physical screen edges; add --safe-t/--safe-b from
env(safe-area-inset-*) threaded through #tabbar/#term/#keybar/#approvalbar/#searchbox/
#settingspanel. Falls back to 0px (zero regression on non-safe-area platforms).
This commit is contained in:
Yaojia Wang
2026-07-06 16:51:03 +02:00
parent bfe1be1dfe
commit 5e7e4b22f2
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/style.css
View File

@@ -25,6 +25,13 @@
--tabbar-h: 40px; --tabbar-h: 40px;
--keybar-h: 46px; --keybar-h: 46px;
/* iOS notch / home-indicator clearance. index.html sets viewport-fit=cover,
* so the layout spans the physical screen edges; without these the top bar
* hides under the status bar and the bottom key-bar covers terminal output.
* Falls back to 0px on platforms without safe areas. */
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
} }
@@ -56,7 +63,9 @@ body {
#tabbar { #tabbar {
position: fixed; position: fixed;
inset: 0 0 auto 0; inset: 0 0 auto 0;
height: var(--tabbar-h); box-sizing: border-box;
height: calc(var(--tabbar-h) + var(--safe-t));
padding-top: var(--safe-t);
background: linear-gradient(180deg, #181a22, var(--surface-1)); background: linear-gradient(180deg, #181a22, var(--surface-1));
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
display: flex; display: flex;
@@ -285,7 +294,7 @@ body {
/* ── Terminal area ───────────────────────────────────────────────── */ /* ── Terminal area ───────────────────────────────────────────────── */
#term { #term {
position: absolute; position: absolute;
inset: var(--tabbar-h) 0 var(--keybar-h) 0; inset: calc(var(--tabbar-h) + var(--safe-t)) 0 calc(var(--keybar-h) + var(--safe-b)) 0;
background: var(--bg); background: var(--bg);
overflow: hidden; overflow: hidden;
} }
@@ -301,13 +310,14 @@ body {
#keybar { #keybar {
position: fixed; position: fixed;
inset: auto 0 0 0; inset: auto 0 0 0;
height: var(--keybar-h); box-sizing: border-box;
height: calc(var(--keybar-h) + var(--safe-b));
background: var(--surface-1); background: var(--surface-1);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
padding: 0 6px; padding: 0 6px var(--safe-b);
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
z-index: 1000; z-index: 1000;
@@ -382,7 +392,7 @@ body {
#searchbox { #searchbox {
position: fixed; position: fixed;
top: calc(var(--tabbar-h) + 8px); top: calc(var(--tabbar-h) + var(--safe-t) + 8px);
right: 10px; right: 10px;
z-index: 1100; z-index: 1100;
display: flex; display: flex;
@@ -480,7 +490,7 @@ body {
/* Settings panel */ /* Settings panel */
#settingspanel { #settingspanel {
position: fixed; position: fixed;
top: calc(var(--tabbar-h) + 8px); top: calc(var(--tabbar-h) + var(--safe-t) + 8px);
right: 10px; right: 10px;
z-index: 1100; z-index: 1100;
background: var(--surface-2); background: var(--surface-2);
@@ -679,7 +689,7 @@ body {
/* Approval banner (H3) */ /* Approval banner (H3) */
#approvalbar { #approvalbar {
position: fixed; position: fixed;
inset: auto 0 var(--keybar-h) 0; inset: auto 0 calc(var(--keybar-h) + var(--safe-b)) 0;
z-index: 1050; z-index: 1050;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1547,9 +1557,10 @@ body {
body.home-open #keybar { body.home-open #keybar {
display: none; display: none;
} }
/* Home chooser hides the key-bar, so reclaim its reserved space at the bottom. */ /* Home chooser hides the key-bar, so reclaim its reserved space at the bottom
* (keeping the home-indicator clearance so launcher content stays reachable). */
body.home-open #term { body.home-open #term {
bottom: 0; bottom: var(--safe-b);
} }
/* Desktop: float the Sessions/Projects toggle top-right, on the SAME row as the /* Desktop: float the Sessions/Projects toggle top-right, on the SAME row as the