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

FN-6033: fix mobile workflow editor selection and touch targets

Browse Source 
Keep the workflow editor mobile-first selection flow usable and improve tap targets on phones.

- start the mobile workflow editor on the workflow list with no preselected workflow and show a select-a-workflow prompt
- keep mobile list/editor stage transitions in sync after create, duplicate, import, and delete actions
- increase workflow editor mobile touch targets and padding without changing desktop sizing
- add regression coverage for mobile viewport selection behavior and CSS touch-target scoping
- update the dashboard guide to document the mobile workflow editor behavior

Files changed:
docs/dashboard-guide.md                            |  2 +-
packages/dashboard/app/components/WorkflowNodeEditor.css          | 56 +++++++++++++++++-
packages/dashboard/app/components/WorkflowNodeEditor.tsx          | 24 ++++++--
packages/dashboard/app/components/__tests__/WorkflowNodeEditor.css.test.ts       | 36 ++++++++++++
packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx          | 68 ++++++++++++++++++++++

Fusion-Task-Id: FN-6033

Fusion-Task-Lineage: c9da29ef-c099-4e14-8671-24995106c78c
This commit is contained in:
gsxdsm
2026-06-08 12:37:36 -07:00
parent 7d8ae5333e
commit 5976b63fda
5 changed files with 180 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/dashboard-guide.md
View File

@@ -111,7 +111,7 @@ Behavior:
- The Settings panel is value-first for built-in workflows and groups workflow settings by Models, Review & Approval, Step Execution, and Advanced. Definitions remain available for custom workflow schema authoring.
- The main Settings modal also exposes the default workflow's Plan/Triage, Executor, and Reviewer model lanes from **Project Models**; those controls write workflow setting values for the active default workflow.
- On desktop, the editor uses a multi-panel layout for editing the graph and adjacent workflow metadata
- On viewports `<=768px`, the editor switches to a full-screen mobile sheet and stacks the sidebar, canvas, inspector, and settings/authoring panels vertically so each section remains scrollable and usable on phones
- On viewports `<=768px`, the editor switches to a full-screen mobile sheet, opens to the workflow list with no workflow preselected, prompts users to select a workflow to edit, and uses larger workflow-editor touch targets so each section remains scrollable and usable on phones
- The create-workflow dialog and workflow AI authoring popover follow the same mobile full-screen/sheet pattern so they are not clipped by the editor canvas on narrow screens
## Planning Mode