Carlos Florêncio
3.7 KiB
created, status, requirements, system_design, legacy_specs
| created | status | requirements | system_design | legacy_specs | ||
|---|---|---|---|---|---|---|
| 2026-09-13 | complete |
|
|
Implementation Plan: Workflow hover width
Overview
Widen the compact workflow hover so ordinary step names remain readable. One sequential work order covers the CSS correction and rendered checks.
Scope
Include desktop disclosure width and regression coverage. Exclude move policy, backend changes, new copy, full-stepper changes, and phone navigation changes.
Technical approach
The screenshot showed truncated labels beside fixed-size controls. CompactWorkflowDisclosureSurface now uses w-[28rem] (448px) instead of w-72 (288px). StepDisclosureRow still gives the label remaining flex space and applies truncate; actions do not shrink.
Replace w-72 with w-[28rem] in apps/web/components/task/workflow-step-disclosure.tsx. Preserve the viewport cap, collision handling, and touch Drawer branch. The existing UI specification owns this responsive disclosure; tasks retain movement policy ownership.
ASCII UI preview
UI-01: Compact stepper hover, eligible step. AC-001.11 and AC-001.6 below refer to the full acceptance IDs in the work order.
Before: [o I... icons options Move here]
After: [o Implementation icons options Move here]
Phone: [Task actions] -> [Move to] -> [step choices]
Tablet: [Current step v] -> [inset drawer with step choices]
Keep the row order and right-hand actions. Width is 28rem, capped to the viewport; ASCII spacing is illustrative. The existing list owns vertical scrolling. Keep safe-area padding and touch targets in the existing drawer. Phone navigation stays as shipped; the nearest exemplar is the existing compact disclosure Drawer and phone task actions.
Tests
Run existing workflow-stepper component tests to check interaction semantics. Do not add a unit test that only repeats a CSS class.
E2E tests
Extend apps/web/e2e/tests/layout/task-topbar-workflow-stepper.spec.ts with a test named compact disclosure keeps ordinary step names readable for AC-001.11. Seed Backlog and Implementation with capability icons and enabled move controls. Assert label scrollWidth does not exceed clientWidth, actions remain contained, and the dialog stays within the viewport. Cover English and pt-pt action widths.
Retain existing desktop keyboard and tablet Drawer checks for AC-001.6 and AC-001.3. Run the existing phone task-drawer move scenario for AC-001.9. Capture desktop and phone screenshots during these focused checks.
Work orders
Verification results
Implementation and rendered checks passed. The desktop Popover uses w-[28rem] with the existing viewport cap; the touch Drawer branch is unchanged. The regression covers Backlog and Implementation labels, capability icons, action containment, English and pt-pt, and viewport containment.
Validation passed: pnpm exec vitest run components/task/workflow-stepper.test.tsx (20 tests), targeted ESLint, the desktop workflow-stepper E2E (3 tests), the phone task-drawer move E2E (1 test), and git diff --check. The host E2E run built the backend and pseudo-locale Vite bundle successfully. Documentation validation also passed: list-docs.py validate (267 decisions, 895 specifications), lint-spec-files.py --all, and lint-spec-files.test.py (36 tests).
Risks
Long custom names may still truncate. Localized action labels consume more width; rendered checks must use real icons and controls.
Documentation impact
Internal requirements and design updated. Public instructions and terminology remain accurate because only spacing changes.