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

fix(FN-2513): anchor mobile toasts below header

Browse Source 
- Move mobile .toast-container positioning from bottom offset to top offset beneath the fixed header
- Tokenize horizontal toast spacing on mobile using var(--space-sm) instead of hardcoded pixel values
- Update utility mobile CSS regression test expectations for top anchoring and auto bottom behavior
This commit is contained in:
Fusion
2026-04-25 13:25:52 -07:00
committed by gsxdsm
parent dfb566ebc6
commit d65b75d4b2
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dashboard/app/components/__tests__/utility-mobile.test.tsx
View File

@@ -233,7 +233,10 @@ describe("Utility component mobile adaptations", () => {
expectMobileRule(css, ".settings-layout", "flex-direction: column;");
expectMobileRule(css, ".agent-board", "grid-template-columns: 1fr;");
expectMobileRule(css, ".active-agents-grid", "grid-template-columns: 1fr;");
expectMobileRule(css, ".toast-container", "bottom: calc(var(--mobile-nav-height, 44px) + var(--executor-footer-height, 0px) + var(--standalone-bottom-gap, 0px) + env(safe-area-inset-bottom, 0px) + var(--space-lg) + var(--space-2xl));");
expectMobileRule(css, ".toast-container", "top: calc(var(--header-height, 57px) + env(safe-area-inset-top, 0px) + var(--space-sm));");
expectMobileRule(css, ".toast-container", "bottom: auto;");
expectMobileRule(css, ".toast-container", "right: var(--space-sm);");
expectMobileRule(css, ".toast-container", "left: var(--space-sm);");
expectMobileRule(css, ".background-tasks-indicator__popover", "position: fixed;");
});
});

7
packages/dashboard/app/styles.css
View File

@@ -2187,9 +2187,10 @@ input[type="range"]:focus-visible {
@media (max-width: 768px) {
.toast-container {
bottom: calc(var(--mobile-nav-height, 44px) + var(--executor-footer-height, 0px) + var(--standalone-bottom-gap, 0px) + env(safe-area-inset-bottom, 0px) + var(--space-lg) + var(--space-2xl));
right: 8px;
left: 8px;
top: calc(var(--header-height, 57px) + env(safe-area-inset-top, 0px) + var(--space-sm));
bottom: auto;
right: var(--space-sm);
left: var(--space-sm);
}
.toast {