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

56
packages/dashboard/app/components/WorkflowNodeEditor.css
View File

@@ -252,6 +252,15 @@
font-size: 0.85rem;
}
.wf-editor-select-note {
padding: var(--space-sm) var(--space-md);
background: color-mix(in srgb, var(--ws-info) 8%, var(--bg-secondary));
border: 1px solid var(--ws-info);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 0.85rem;
}
.wf-editor-canvas-wrap {
display: flex;
flex-direction: column;
@@ -1160,6 +1169,8 @@
.wf-editor-modal,
.wf-create-modal {
--wf-editor-touch-target: calc(var(--space-xl) + var(--space-lg) + var(--space-xs));
width: 100vw;
min-width: 0;
max-width: 100vw;
@@ -1228,8 +1239,9 @@
align-items: center;
align-self: flex-start;
gap: var(--space-xs);
min-height: var(--wf-editor-touch-target);
margin: var(--space-sm) var(--space-sm) 0;
padding: 5px 8px;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
@@ -1259,6 +1271,48 @@
min-height: 0;
}
.wf-editor-list-item,
.wf-editor-new,
.wf-editor-import,
.wf-sidebar-section-toggle,
.wf-palette-btn,
.wf-editor-action,
.wf-editor-delete,
.wf-editor-save,
.wf-templates-toggle,
.wf-templates-entry,
.wf-template-option,
.wf-ai-toggle,
.wf-workflow-name,
.wf-workflow-name-input,
.wf-column-panel button,
.wf-fields-panel button,
.wf-settings-panel button {
min-height: var(--wf-editor-touch-target);
}
.wf-editor-list-item,
.wf-editor-new,
.wf-editor-import,
.wf-palette-btn,
.wf-editor-action,
.wf-editor-delete,
.wf-editor-save,
.wf-templates-toggle,
.wf-templates-entry,
.wf-ai-toggle {
padding: var(--space-sm) var(--space-md);
}
.wf-field input,
.wf-field textarea,
.wf-field select,
.wf-templates-filter,
.wf-ai-prompt {
min-height: var(--wf-editor-touch-target);
padding: var(--space-sm) var(--space-md);
}
.wf-template-list {
max-height: 40vh;
}