1f2c7e22dc
Make the workflow editor and related settings panels usable on narrow screens. - add mobile-specific full-screen layout overrides for the workflow editor, create dialog, sidebar, inspector, settings panel, and AI panel - stack workflow selector, workflow settings, and workflow fields controls for phone-sized viewports - document the workflow editor mobile behavior in the dashboard guide - add CSS contract tests covering the new mobile workflow editor and panel rules Files changed: docs/dashboard-guide.md | 13 +++ .../app/components/WorkflowFieldsPanel.css | 15 +++ .../app/components/WorkflowNodeEditor.css | 94 ++++++++++++++++++ .../dashboard/app/components/WorkflowSelector.css | 16 ++++ .../app/components/WorkflowSettingsPanel.css | 20 ++++ .../__tests__/WorkflowNodeEditor.css.test.ts | 105 +++++++++++++++++++++ 6 files changed, 263 insertions(+) Fusion-Task-Id: FN-5992 Fusion-Task-Lineage: c92396dc-88e5-4da0-be3f-687e7bd10972
65 lines
1.2 KiB
CSS
65 lines
1.2 KiB
CSS
.workflow-selector {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.workflow-selector-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.workflow-selector-label-text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.workflow-selector select {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
font: inherit;
|
|
}
|
|
|
|
.workflow-selector select:focus {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.workflow-selector-manage {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workflow-selector-manage:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.workflow-selector {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.workflow-selector select,
|
|
.workflow-selector-manage {
|
|
width: 100%;
|
|
}
|
|
|
|
.workflow-selector-manage {
|
|
text-align: center;
|
|
}
|
|
}
|