fix(ui): normalize workflow move options styling (#3644)
This commit is contained in:
José Almeida
@@ -336,7 +336,7 @@ function StepMenuSubItem({
|
||||
// this wrapper (bubble phase, after the field handled them) so the
|
||||
// menu's typeahead never yanks focus off the instructions field or the
|
||||
// agent-profile combobox search while the user is typing.
|
||||
<div className="p-1" onKeyDown={(event) => event.stopPropagation()}>
|
||||
<div className="p-2" onKeyDown={(event) => event.stopPropagation()}>
|
||||
<WorkflowMoveOptionsForm
|
||||
isMoving={isMoving ?? false}
|
||||
isTouchSurface={false}
|
||||
|
||||
@@ -74,13 +74,8 @@ type WorkflowMoveOptionsFieldsProps = {
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset-context, skip-step-prompt, and one-time instructions fields. Font size
|
||||
* is inherited from the hosting surface (Dialog, Drawer, and the stepper hover
|
||||
* card all share the `text-xs/relaxed` popover base) so the fields never stand
|
||||
* out larger than the surrounding chrome. Checkboxes align to the first text
|
||||
* line so a wrapping label reads cleanly. The skip-step-prompt consequence is
|
||||
* disclosed through an info-icon tooltip (hover on desktop, focus/tap on touch)
|
||||
* rather than an always-visible paragraph.
|
||||
* Move fields own their typography because portaled menus do not share the
|
||||
* dialog/popover text baseline. Touch surfaces retain larger labels and targets.
|
||||
*/
|
||||
export function WorkflowMoveOptionsFields({
|
||||
draft,
|
||||
@@ -89,14 +84,16 @@ export function WorkflowMoveOptionsFields({
|
||||
instructionsRows = 4,
|
||||
}: WorkflowMoveOptionsFieldsProps) {
|
||||
const { t } = useTranslation();
|
||||
const rowClass = isTouchSurface ? "flex items-center gap-3 min-h-11" : "flex items-start gap-2.5";
|
||||
const rowClass = isTouchSurface
|
||||
? "flex items-center gap-2.5 min-h-11"
|
||||
: "flex items-start gap-2.5";
|
||||
const checkboxClass = cn("shrink-0", !isTouchSurface && "mt-0.5");
|
||||
const hintButtonClass = cn(
|
||||
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
isTouchSurface ? "size-11" : "mt-0.5 size-4",
|
||||
);
|
||||
return (
|
||||
<div className="grid gap-3.5">
|
||||
<div className={cn("grid min-w-0 gap-3 text-xs/relaxed", isTouchSurface && "text-sm/relaxed")}>
|
||||
<label className={rowClass}>
|
||||
<Checkbox
|
||||
className={checkboxClass}
|
||||
@@ -133,7 +130,7 @@ export function WorkflowMoveOptionsFields({
|
||||
</Tooltip>
|
||||
</div>
|
||||
<label className="grid gap-1.5">
|
||||
<span>{t("task:workflowMoveInstructions")}</span>
|
||||
<span className="font-medium">{t("task:workflowMoveInstructions")}</span>
|
||||
<Textarea
|
||||
value={draft.instructions}
|
||||
onChange={(event) => onDraftChange({ instructions: event.target.value })}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
created: 2026-09-13
|
||||
status: done
|
||||
requirements:
|
||||
- REQ-UI-CONTROL-SIZING-001
|
||||
system_design:
|
||||
- ../../specs/ui/system-design/control-sizing.md
|
||||
legacy_specs: []
|
||||
---
|
||||
|
||||
# Implementation Plan: Workflow move options styling
|
||||
|
||||
## Overview
|
||||
|
||||
Normalize the shared one-time move form's typography and spacing across existing
|
||||
menus, popovers, dialogs, and touch surfaces. This delivery record documents the
|
||||
completed presentation correction and its validation; it introduces no new
|
||||
workflow behavior.
|
||||
|
||||
## Scope and technical approach
|
||||
|
||||
`WorkflowMoveOptionsFields` owns explicit 12px desktop and 14px touch label
|
||||
baselines instead of inheriting different host fonts. Use 12px field gaps,
|
||||
consistent checkbox spacing, and medium-weight instructions labeling.
|
||||
`StepMenuSubItem` increases its inner form padding from 4px to 8px.
|
||||
Preserve the shared textarea's 16px touch anti-zoom rule, Move action dimensions,
|
||||
existing state, translations, and surface selection.
|
||||
|
||||
Backend behavior, workflow prompts, new copy, and overlay restructuring are out
|
||||
of scope. The existing mobile task move picker remains the touch exemplar.
|
||||
|
||||
## ASCII UI preview
|
||||
|
||||
UI-01: Expanded move fields, reached through destination options.
|
||||
|
||||
```text
|
||||
[ ] Clear the agent context before entering
|
||||
[ ] Skip the step prompt (i)
|
||||
One-time instructions
|
||||
[ Add instructions for the receiving agent ]
|
||||
[ Move ]
|
||||
```
|
||||
|
||||
The field order is shared. Desktop keeps the existing anchored surface and 28px
|
||||
Move action. Phone retains its existing bottom surface, scroll owner, and safe
|
||||
area, with 44px actions and 16px editable text. Spacing above is illustrative.
|
||||
These checks preserve AC-UI-CONTROL-SIZING-001.1, .4, .8, and .9.
|
||||
|
||||
## Work orders
|
||||
|
||||
- [x] [Task 01: Normalize shared move fields](task-01-normalize-move-fields.md)
|
||||
|
||||
## Verification results
|
||||
|
||||
The work order records 50 passing focused tests, production builds, rendered
|
||||
font/geometry checks, and a compatible synthetic merge with the newer base.
|
||||
No public docs update is needed: control behavior and user-facing wording are
|
||||
unchanged. Remote CI and automated review status remain separate delivery gates.
|
||||
|
||||
## Risks
|
||||
|
||||
An inherited font can differ across portaled hosts. Touch inputs intentionally
|
||||
remain larger than labels because the global anti-zoom minimum is authoritative.
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: "01-normalize-move-fields"
|
||||
title: "Normalize shared move fields"
|
||||
status: done
|
||||
wave: 1
|
||||
depends_on: []
|
||||
plan: "plan.md"
|
||||
requirements:
|
||||
- REQ-UI-CONTROL-SIZING-001
|
||||
acceptance_criteria:
|
||||
- AC-UI-CONTROL-SIZING-001.1
|
||||
- AC-UI-CONTROL-SIZING-001.4
|
||||
- AC-UI-CONTROL-SIZING-001.8
|
||||
- AC-UI-CONTROL-SIZING-001.9
|
||||
system_design:
|
||||
- ../../specs/ui/system-design/control-sizing.md
|
||||
---
|
||||
|
||||
# Task 01: Normalize shared move fields
|
||||
|
||||
## Scope and owned files
|
||||
|
||||
- `apps/web/components/task/workflow-move-options.tsx`: explicit field typography,
|
||||
consistent gaps, label emphasis, and an accurate ownership comment.
|
||||
- `apps/web/components/task/task-move-context-menu.tsx`: inner form padding.
|
||||
|
||||
No changes to payloads, state, translations, or desktop/mobile surface selection.
|
||||
|
||||
## Acceptance
|
||||
|
||||
1. Shared labels render at 12px on desktop and 14px on touch surfaces, independent
|
||||
of their host. Touch editing retains the 16px anti-zoom minimum (001.9).
|
||||
2. The existing Move action remains 28px desktop and at least 44px touch
|
||||
(001.1, 001.4), with existing submission and dismissal behavior (001.8).
|
||||
3. Checkbox spacing is consistent, instructions have a medium-weight label, and
|
||||
menu padding contains the form without horizontal overflow.
|
||||
|
||||
## ASCII UI preview
|
||||
|
||||
UI-01 from the [plan](plan.md#ascii-ui-preview):
|
||||
|
||||
```text
|
||||
[ ] Reset context
|
||||
[ ] Skip step prompt (i)
|
||||
One-time instructions
|
||||
[ multiline input ]
|
||||
[ Move ]
|
||||
```
|
||||
|
||||
Labels above abbreviate existing localized copy. Desktop remains anchored;
|
||||
phone keeps its bottom surface and existing scroll/safe-area ownership.
|
||||
|
||||
## Verification commands
|
||||
|
||||
From `apps/web`:
|
||||
|
||||
```bash
|
||||
pnpm exec vitest run components/task/workflow-move-options-form.test.tsx components/task/task-switcher-context-menu.test.tsx components/task/workflow-move-proceed-button.test.tsx
|
||||
pnpm exec eslint components/task/workflow-move-options.tsx components/task/task-move-context-menu.tsx
|
||||
pnpm exec prettier --check components/task/workflow-move-options.tsx components/task/task-move-context-menu.tsx
|
||||
```
|
||||
|
||||
From repository root: `make build-web` and `make -C apps/backend build-dev`.
|
||||
|
||||
## Results
|
||||
|
||||
- 50 focused tests passed; targeted lint, formatting, and normal commit hooks passed.
|
||||
- Both builds passed. The seeded task's move-options surface loaded through the
|
||||
isolated backend. This was UI verification, not a successful agent-turn test.
|
||||
- Chromium component previews verified desktop labels/input at 12px, Move at
|
||||
28px; Pixel 5 labels at 14px, input at 16px, Move at 44px; no horizontal overflow.
|
||||
- Touch checks at 767, 768, 900, and 1024px all measured 14px labels and 16px input.
|
||||
`app/globals.css` overrides the textarea's breakpoint font with the anti-zoom rule.
|
||||
- The same 50 tests passed on a conflict-free synthetic merge with the newer base.
|
||||
- Existing desktop/mobile `workflow-step-move-overrides` E2E specs cover the move
|
||||
workflow, but full workflow E2E was not run for this presentation-only patch.
|
||||
Temporary rendered checks were removed after verification.
|
||||
|
||||
## Risks and documentation
|
||||
|
||||
Preserve the touch input anti-zoom minimum even when label typography differs.
|
||||
No public docs change is needed because behavior and terminology are unchanged.
|
||||
Reference in New Issue
Block a user