Skip to content

fix(mobile): lift the iOS Safari toolbar by the measured chrome overlap #392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ark0N merged 1 commit into from
Sep 10, 2026
Merged

fix(mobile): lift the iOS Safari toolbar by the measured chrome overlap #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/web/public/mobile-handlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,13 @@ const MobileDetection = {
if (typeof KeyboardHandler !== 'undefined' && KeyboardHandler.keyboardVisible) return;
const vh = window.visualViewport?.height || window.innerHeight;
document.documentElement.style.setProperty('--app-height', `${vh}px`);
// How far the layout viewport (which anchors position: fixed) extends below
// the visual viewport, i.e. behind the browser's bottom bar. 0 on iPhone
// Safari, where fixed elements already stop above the bar; the overlap
// where they do not. mobile.css lifts the toolbar by this rather than by
// (100vh - --app-height), which on iPhone measures the collapsible chrome
// instead and left an empty band between the toolbar and the bar.
document.documentElement.style.setProperty('--chrome-overlap', `${Math.max(0, window.innerHeight - vh)}px`);
},

/** Initialize mobile detection and set up resize listener */
Expand Down
19 changes: 11 additions & 8 deletions src/web/public/mobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,11 +471,11 @@ html.mobile-init .file-browser-panel {
padding-bottom: calc(40px + var(--safe-area-bottom));
}

/* iOS Safari: toolbar is pushed up by (100vh - --app-height) to clear the
browser's bottom bar. Match that offset in main's padding so the terminal
doesn't extend behind the toolbar. */
/* iOS Safari: the toolbar is lifted by --chrome-overlap where the browser's
bottom bar would otherwise cover it. Match that offset in main's padding so
the terminal doesn't extend behind the toolbar. */
.ios-device.safari-browser .main {
padding-bottom: calc(40px + var(--safe-area-bottom) + (100vh - var(--app-height, 100vh)));
padding-bottom: calc(40px + var(--safe-area-bottom) + var(--chrome-overlap, 0px));
}

.header-right {
Expand Down Expand Up @@ -780,11 +780,14 @@ html.mobile-init .file-browser-panel {
will-change: transform;
}

/* iOS Safari with tab bar: position: fixed uses the layout viewport which
extends behind the browser chrome. Offset the toolbar upward by the delta
between 100vh (layout) and --app-height (visual). */
/* iOS Safari: where position: fixed anchors to a layout viewport that
extends behind the browser's bottom bar, lift the toolbar by that overlap.
--chrome-overlap is innerHeight minus the visual viewport height, set in
mobile-handlers.js. On iPhone Safari it is 0 because fixed elements already
stop above the bar; the previous (100vh - --app-height) lift measured the
collapsible chrome instead and left an empty band above the bar. */
.ios-device.safari-browser .toolbar {
bottom: calc(var(--safe-area-bottom) + (100vh - var(--app-height, 100vh)));
bottom: calc(var(--safe-area-bottom) + var(--chrome-overlap, 0px));
}

/* When keyboard is visible the JS translateY already accounts for the full
Expand Down