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

feat(FN-3965): add mobile footer reservation and touch target fixes

Browse Source 
Applies FN-3965 mobile UI fixes: adds bottom safe-area reservation for the mobile nav bar and enforces minimum 36px touch targets on interactive task card elements, with tests covering the responsive layout breakpoints.

Fusion-Task-Id: FN-3965
This commit is contained in:
Fusion
2026-05-10 21:25:21 -07:00
committed by gsxdsm
parent 9d785a7ed6
commit 407ce618b7
4 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard/app/App.tsx
View File

@@ -1623,7 +1623,7 @@ function AppInner() {
/>
)}
<div
className={`project-content${viewMode === "project" && currentProject ? " project-content--with-footer" : ""}${isMobile && !mobileKeyboardOpen ? " project-content--with-mobile-nav" : ""}`}
className={`project-content${viewMode === "project" && currentProject && (!isMobile || !mobileKeyboardOpen) ? " project-content--with-footer" : ""}${isMobile && !mobileKeyboardOpen ? " project-content--with-mobile-nav" : ""}`}
>
{renderMainContent()}
</div>

20
packages/dashboard/app/components/TaskCard.css
View File

@@ -1087,11 +1087,11 @@
/* Card edit button: always visible on mobile (no hover) */
.card-edit-btn {
opacity: 1;
width: 32px;
height: 32px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: -8px;
width: calc(var(--space-xl) + var(--space-md));
height: calc(var(--space-xl) + var(--space-md));
margin-right: calc(-1 * var(--space-sm));
margin-top: calc(-1 * var(--space-sm));
margin-bottom: calc(-1 * var(--space-sm));
border-radius: var(--radius-md);
}
@@ -1103,11 +1103,11 @@
/* Card delete button: always visible on mobile (no hover) */
.card-delete-btn {
opacity: 1;
width: 32px;
height: 32px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: -8px;
width: calc(var(--space-xl) + var(--space-md));
height: calc(var(--space-xl) + var(--space-md));
margin-right: calc(-1 * var(--space-sm));
margin-top: calc(-1 * var(--space-sm));
margin-bottom: calc(-1 * var(--space-sm));
border-radius: var(--radius-md);
}

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

@@ -286,12 +286,30 @@ describe("TaskCard mobile", () => {
expectRuleToContain(css, ".card-session-files span", "white-space: nowrap;");
});
it("sets .card-edit-btn width and height to 32px in the mobile media block", () => {
it("uses tokenized 36px touch targets for TaskCard action buttons in the mobile media block", () => {
const css = loadAllAppCss();
const mobileSection = getMainMobileSection(css);
expectRuleToContain(mobileSection, ".card-edit-btn", "width: 32px;");
expectRuleToContain(mobileSection, ".card-edit-btn", "height: 32px;");
expectRuleToContain(
mobileSection,
".card-edit-btn",
"width: calc(var(--space-xl) + var(--space-md));",
);
expectRuleToContain(
mobileSection,
".card-edit-btn",
"height: calc(var(--space-xl) + var(--space-md));",
);
expectRuleToContain(
mobileSection,
".card-delete-btn",
"width: calc(var(--space-xl) + var(--space-md));",
);
expectRuleToContain(
mobileSection,
".card-delete-btn",
"height: calc(var(--space-xl) + var(--space-md));",
);
});
it("opens task detail on quick tap", async () => {