BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-09-30 12:39:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #392 from JDProfresh/fix/ios-safari-toolbar-gap

Browse Source 
fix(mobile): lift the iOS Safari toolbar by the measured chrome overlap
This commit is contained in:
Ark0N
2026-09-10 03:10:12 +02:00
committed by GitHub
parent 713f632a64 c367b12f77
commit e3d5fd90cd
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/mobile-handlers.js
+7
View File
@@ -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 */
src/web/public/mobile.css
+11 -8
View File
@@ -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 {
@@ -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