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

feat(FN-3232): add standalone bottom-gap token and mobile CSS contract test

Browse Source 
This merge bundles six feature steps across mobile PWA spacing, test infrastructure, MissionManager tokenization, and Insights coverage. Key changes include restoring the `--standalone-bottom-gap` CSS token contract for iOS home indicator spacing, a refactored `test-changed.mjs` script with workflow

Fusion-Task-Id: FN-3232
This commit is contained in:
Fusion
2026-05-03 05:52:32 -07:00
committed by gsxdsm
parent 87dda5d5f3
commit cdfa6ae281
6 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts
View File

@@ -65,9 +65,9 @@ describe("mobile-nav-bar.css", () => {
it("executor status bar has bottom offset above nav bar on mobile", () => {
// ExecutorStatusBar mobile override positions it above the mobile nav bar
// Uses --mobile-nav-height variable for consistent nav-height contract
// and includes safe-area + standalone token spacing in scoped rule.
expect(mobileMediaBlock).toMatch(
/\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(var\(--mobile-nav-height\)/,
/\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(var\(--mobile-nav-height\)\s*\+\s*env\(safe-area-inset-bottom,\s*0px\)\s*\+\s*var\(--standalone-bottom-gap\)\)/,
);
});
@@ -93,6 +93,8 @@ describe("mobile-nav-bar.css", () => {
expect(mobileMediaBlock).toContain(".project-content--with-mobile-nav");
expect(cssContent).toContain(".project-content--with-footer.project-content--with-mobile-nav");
expect(cssContent).toContain("var(--executor-footer-height)");
expect(cssContent).toContain("env(safe-area-inset-bottom, 0px)");
expect(cssContent).toContain("var(--standalone-bottom-gap)");
expect(cssContent).not.toContain("calc(32px + var(--mobile-nav-height)");
});

5
packages/dashboard/app/__tests__/pwa.test.ts
View File

@@ -59,15 +59,16 @@ describe("PWA configuration", () => {
const standaloneBlock = getStandaloneDisplayModeBlock(cssContent);
expect(standaloneBlock).toContain("@media (display-mode: standalone)");
expect(standaloneBlock).toMatch(/:root\s*\{[\s\S]*?--standalone-bottom-gap:\s*0px/);
expect(standaloneBlock).toMatch(/:root\s*\{[\s\S]*?--standalone-bottom-gap:\s*var\(--space-sm\)/);
expect(standaloneBlock).not.toContain("#root {");
});
it("CSS defines --standalone-bottom-gap token in :root", () => {
const cssContent = loadAllAppCss();
// Token defined in :root; standalone mode currently overrides to 0 (no extra gap beyond safe-area).
// Base token defaults to 0px and standalone mode overrides it via :root inside display-mode media query.
expect(cssContent).toContain("--standalone-bottom-gap: 0px");
expect(cssContent).toContain("--standalone-bottom-gap: var(--space-sm)");
});
it("CSS applies standalone bottom gap via scoped mobile layout rules, not global #root padding", () => {

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

@@ -268,7 +268,7 @@
font-size: 11px;
height: calc(var(--space-lg) * 2 + var(--space-xs));
overflow: hidden;
bottom: calc(var(--mobile-nav-height) + var(--standalone-bottom-gap));
bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
}
.executor-status-bar__segment {

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

@@ -36,12 +36,14 @@
/* Content padding: mobile nav only (no footer). Bar is flush at bottom (no safe-area pad). */
.project-content--with-mobile-nav:not(.project-content--with-footer) {
padding-bottom: calc(var(--mobile-nav-height) + var(--standalone-bottom-gap));
padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
}
/* Content padding: both mobile nav AND footer */
.project-content--with-footer.project-content--with-mobile-nav {
padding-bottom: calc(var(--executor-footer-height) + var(--mobile-nav-height) + var(--standalone-bottom-gap));
padding-bottom: calc(
var(--executor-footer-height) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap)
);
}
}

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

@@ -2922,8 +2922,8 @@ input[type="range"]:focus-visible {
@media (display-mode: standalone) {
:root {
/* PWA standalone mode: rely on env(safe-area-inset-bottom) alone; no extra gap */
--standalone-bottom-gap: 0px;
/* Installed PWA mode: add tokenized breathing room above iOS home indicator. */
--standalone-bottom-gap: var(--space-sm);
}
}