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

feat(FN-1372): reduce mobile nav bar height from 56px to 48px

Browse Source 
- Reduce MobileNavBar height from 56px to 48px for a more compact mobile experience
- Update footer safe area padding to accommodate the new nav height
- Update board mobile layout tests to reflect the reduced height
- Update mobile nav bar CSS tests for the new height value
This commit is contained in:
gsxdsm
2026-04-09 22:50:43 -07:00
parent 9411721d83
commit f4c861e192
4 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard/app/__tests__/footer-safe-layout.test.ts
View File

@@ -127,7 +127,7 @@ describe("footer-safe project workspace layout", () => {
it("on mobile, positions above the mobile nav bar", () => {
const mobileCss = extractMobileMediaBlocks(css);
expect(mobileCss).toMatch(
/\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(56px/,
/\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(48px/,
);
});

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

@@ -66,7 +66,7 @@ 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
expect(mobileMediaBlock).toMatch(
/\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(56px/,
/\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(48px/,
);
});

6
packages/dashboard/app/components/__tests__/board-mobile.test.tsx
View File

@@ -156,11 +156,13 @@ describe("Board and Column mobile CSS", () => {
expectRuleToContain(mobileSection, ".board::-webkit-scrollbar", "display: none;");
});
it("keeps safe-area-inset-bottom handling on .board in the mobile media block", () => {
it("uses simple padding-bottom on .board (safe-area handled by parent)", () => {
const css = fs.readFileSync(stylesPath, "utf-8");
const mobileSection = getMainMobileSection(css);
expectRuleToContain(mobileSection, ".board", "env(safe-area-inset-bottom");
// Board padding-bottom is just var(--space-md) to avoid double-counting safe-area-inset-bottom
// which is already handled by .project-content--with-mobile-nav padding
expectRuleToContain(mobileSection, ".board", "padding-bottom: var(--space-md);");
});
});

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

@@ -6087,7 +6087,7 @@ body {
scroll-behavior: smooth;
scrollbar-width: none;
padding: var(--space-md);
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
padding-bottom: var(--space-md);
gap: var(--space-md);
height: 100%;
}
@@ -21537,7 +21537,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
font-size: 11px;
height: 32px;
overflow: hidden;
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
.executor-status-bar__segment {
@@ -27874,7 +27874,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
align-items: stretch;
background: var(--surface);
border-top: 1px solid var(--border);
min-height: 56px;
min-height: 48px;
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
@@ -27890,12 +27890,12 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
/* Content padding: mobile nav only (no footer) */
.project-content--with-mobile-nav:not(.project-content--with-footer) {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
/* Content padding: both mobile nav AND footer */
.project-content--with-footer.project-content--with-mobile-nav {
padding-bottom: calc(32px + 56px + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(32px + 48px + env(safe-area-inset-bottom, 0px));
}
}