From d62daa9d70437e1a46f7dd31f6138f90ebd54b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Almeida?=
 <57680069+zeval@users.noreply.github.com>
Date: Sun, 13 Sep 2026 18:02:11 +0200
Subject: [PATCH] fix(ui): normalize workflow move options styling (#3644)

---
 .../task/task-move-context-menu.tsx           |  2 +-
 .../components/task/workflow-move-options.tsx | 17 ++--
 .../workflow-move-options-styling/plan.md     | 63 ++++++++++++++
 .../task-01-normalize-move-fields.md          | 82 +++++++++++++++++++
 4 files changed, 153 insertions(+), 11 deletions(-)
 create mode 100644 docs/plans/workflow-move-options-styling/plan.md
 create mode 100644 docs/plans/workflow-move-options-styling/task-01-normalize-move-fields.md

diff --git a/apps/web/components/task/task-move-context-menu.tsx b/apps/web/components/task/task-move-context-menu.tsx
index 11c365f897..48c02ba35d 100644
--- a/apps/web/components/task/task-move-context-menu.tsx
+++ b/apps/web/components/task/task-move-context-menu.tsx
@@ -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}
diff --git a/apps/web/components/task/workflow-move-options.tsx b/apps/web/components/task/workflow-move-options.tsx
index 4cb9404bb3..7926cc685f 100644
--- a/apps/web/components/task/workflow-move-options.tsx
+++ b/apps/web/components/task/workflow-move-options.tsx
@@ -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 })}
diff --git a/docs/plans/workflow-move-options-styling/plan.md b/docs/plans/workflow-move-options-styling/plan.md
new file mode 100644
index 0000000000..ed2f9ed192
--- /dev/null
+++ b/docs/plans/workflow-move-options-styling/plan.md
@@ -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.
diff --git a/docs/plans/workflow-move-options-styling/task-01-normalize-move-fields.md b/docs/plans/workflow-move-options-styling/task-01-normalize-move-fields.md
new file mode 100644
index 0000000000..d49e71688f
--- /dev/null
+++ b/docs/plans/workflow-move-options-styling/task-01-normalize-move-fields.md
@@ -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.