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

fix(dashboard-mobile): clear Android status bar, footer-nav overlap, fetch toast spam

Browse Source 
- Header.css: mobile padding-top is additive (var(--space-md) + env(safe-area-inset-top)) so the brand row keeps its 12px breathing room below the Android status bar instead of having it replaced by the inset.
- ExecutorStatusBar.css: bottom offset now uses max(env(safe-area-inset-bottom), 12px) to match the floor MobileNavBar already applies, so the footer lands flush on top of the nav instead of inside its padding band.
- useToast.ts: silently drop bare "Failed to fetch" error toasts (from fetch() aborts on tab background/resume); toasts with additional context still pass through.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-23 00:03:22 -07:00
parent d9fe33fec6
commit 1be0702155
4 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -291,7 +291,11 @@
font-size: 11px;
height: calc(var(--space-lg) * 2 + var(--space-xs));
overflow: hidden;
bottom: calc(var(--icb-bottom-offset, 0px) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
/* Must match the mobile nav bar's effective height. MobileNavBar floors
the bottom inset to 12px (Android Chrome under-reports the inset while
its address bar is collapsing), so we have to use the same floor here
or the footer ends up drawn inside the nav's padding area. */
bottom: calc(var(--icb-bottom-offset, 0px) + var(--mobile-nav-height) + max(env(safe-area-inset-bottom, 0px), 12px) + var(--standalone-bottom-gap));
}
.executor-status-bar__segment {

6
packages/dashboard/app/components/Header.css
View File

@@ -936,7 +936,11 @@
padding: var(--space-md);
padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));
padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
padding-top: max(var(--space-md), env(safe-area-inset-top, 0px));
/* Additive: keep normal top padding AND clear the system status bar.
Using max() alone replaced the default padding with the inset, which on
Android (edge-to-edge / Chrome viewport-fit=cover) left the brand row
sitting under the status bar. */
padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
}
/* Mobile: floating search must respect safe-area-inset to stay on-screen */

6
packages/dashboard/app/hooks/useToast.ts
View File

@@ -33,6 +33,12 @@ export function ToastProvider({ children }: { children: ReactNode }) {
}, []);
const addToast = useCallback((message: string, type: ToastType = "info") => {
// Suppress bare network-failure toasts (TypeError "Failed to fetch" from
// aborted in-flight requests when the tab is backgrounded/resumed on
// mobile). Toasts with additional context still pass through.
if (type === "error" && /^\s*Failed to fetch\.?\s*$/i.test(message)) {
return;
}
const id = nextId.current++;
setToasts((prev) => [...prev, { id, message, type }]);
const timer = setTimeout(() => removeToast(id), 4000);