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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user