root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): compensate Android Chrome inflated ICB for fixed-position UI

Browse Source 
Some Android Chrome builds (multi-window / split-screen / certain WebViews)
leave window.innerWidth/Height stuck larger than the actual rendered canvas.
DOM, body, and visualViewport report the true dimensions, but position:fixed
uses the ICB, pinning fixed-bottom elements offscreen below the visible area.
JS-side meta override (setAttribute and full replacement) does not force
Chrome to recompute the ICB on those builds.

index.html now publishes the ICB→visualViewport delta as CSS variables
(--icb-bottom-offset, --icb-right-offset) on <html>. MobileNavBar.css and
ExecutorStatusBar.css consume them so the bars pin to the visible viewport
edge regardless of ICB drift. Math is visualViewport-relative so it also
handles pinch-zoom in (offsets compensate) and pinch-zoom out (clamp at 0).
Healthy browsers see 0px and behave unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-22 13:55:20 -07:00
parent ed4d021d3d
commit e138289a80
4 changed files with 70 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/dashboard/app/components/ExecutorStatusBar.css
View File

@@ -6,9 +6,11 @@
*/
.executor-status-bar {
position: fixed;
bottom: 0;
/* See MobileNavBar.css — ICB compensation for Android Chrome's inflated
initial containing block. Defaults to 0px on healthy browsers. */
bottom: var(--icb-bottom-offset, 0px);
left: 0;
right: 0;
right: var(--icb-right-offset, 0px);
z-index: 50;
display: flex;
align-items: center;
@@ -289,7 +291,7 @@
font-size: 11px;
height: calc(var(--space-lg) * 2 + var(--space-xs));
overflow: hidden;
bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
bottom: calc(var(--icb-bottom-offset, 0px) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
}
.executor-status-bar__segment {