FN-6058: improve mobile workflow node editor layout

Make the mobile workflow editor easier to use by collapsing competing panels and updating coverage.

- add a mobile inspector toggle that collapses node details and re-expands on node selection
- default the templates palette to collapsed on mobile and tighten mobile toolbar/layout styling to avoid overlap
- remove the stale workflow-id preselection path from the editor and align workflow edge/mobile regression coverage
- drop the unused modal prop wiring so the editor API matches the merged implementation

Files changed:
 packages/dashboard/app/components/AppModals.tsx    |   1 -
 .../app/components/WorkflowNodeEditor.css          |  61 +++++++++
 .../app/components/WorkflowNodeEditor.tsx          |  63 +++++++---
 .../__tests__/WorkflowNodeEditor.css.test.ts       |  21 ++++
 .../__tests__/WorkflowNodeEditor.test.tsx          | 139 +++++++++++----------
 5 files changed, 200 insertions(+), 85 deletions(-)

Fusion-Task-Id: FN-6058

Fusion-Task-Lineage: d037832f-8bd8-4e3d-b31b-e30cd9752838
This commit is contained in:
gsxdsm
2026-06-09 01:14:59 -07:00
parent f27ebfd6bb
commit 61cbc5c3db
5 changed files with 200 additions and 85 deletions

View File

@@ -557,6 +557,38 @@
color: var(--text);
}
.wf-inspector-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.wf-inspector-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
color: var(--text);
font: inherit;
cursor: pointer;
}
.wf-inspector-toggle:hover {
background: var(--bg-tertiary);
}
.wf-inspector-toggle--collapsed {
position: absolute;
right: var(--space-sm);
bottom: var(--space-sm);
z-index: 5;
box-shadow: var(--shadow-sm);
}
.wf-field {
display: flex;
flex-direction: column;
@@ -1225,6 +1257,11 @@
min-height: 0;
}
.wf-editor-body--editor-stage .wf-editor-canvas {
flex: 1 1 auto;
min-height: 0;
}
.wf-editor-body--editor-stage .wf-editor-inspector {
width: 100%;
min-width: 0;
@@ -1318,9 +1355,33 @@
}
.wf-editor-toolbar {
flex-wrap: nowrap;
overflow-x: auto;
}
.wf-editor-palette,
.wf-editor-actions {
flex: 0 0 auto;
flex-wrap: nowrap;
}
.wf-templates {
flex: 0 0 auto;
}
.wf-templates-header {
flex-wrap: nowrap;
}
.wf-templates-toggle {
flex: 0 0 auto;
}
.wf-inspector-toggle {
min-height: var(--wf-editor-touch-target);
padding: var(--space-sm) var(--space-md);
}
.wf-ai-panel {
position: fixed;
inset: var(--space-sm);