fix: widen workflow hover disclosure (#3664)

This commit is contained in:
Carlos Florêncio
2026-09-14 14:52:35 +01:00
committed by GitHub
parent 4fde4f7cb4
commit bf0e2853fb
6 changed files with 322 additions and 2 deletions
@@ -41,6 +41,8 @@ The UI system owns this responsive disclosure. The task system continues to own
- **AC-UI-COMPACT-WORKFLOW-STEP-NAVIGATION-001.9:** When a phone does not show the task top bar, the mobile task drawer shall retain its existing **Move to** path.
- **AC-UI-COMPACT-WORKFLOW-STEP-NAVIGATION-001.10:** Fine-pointer movement controls shall retain compact desktop sizing. The 44px minimum shall apply only to coarse-pointer touch hit areas and mobile controls.
- **AC-UI-COMPACT-WORKFLOW-STEP-NAVIGATION-001.11:** On a desktop with sufficient viewport space, the disclosure shall show Backlog and Implementation without truncation alongside capability icons, options, and move controls. Longer names may truncate when constrained by the viewport.
## Out of scope
- Changes to workflow order, task-move permissions, or backend task transitions.
@@ -87,7 +87,7 @@ The current row uses `aria-current="step"`. Eligible movement controls are direc
Fine-pointer movement controls use the surrounding compact desktop button density. The 44px minimum applies to the coarse-pointer drawer's action hit areas and rows, not to the desktop button's visual height.
The Popover stays within the viewport through Radix collision handling. The drawer uses internal scrolling and bottom safe-area padding.
The Popover uses a preferred width of 28rem (448px at the default root font size), capped at `calc(100vw - 1rem)`. This gives step names room beside capability icons and move actions. Keep label truncation as the fallback for unusually long names. Apply this width only to the fine-pointer Popover in `CompactWorkflowDisclosureSurface`; retain the existing touch Drawer geometry. The Popover stays within the viewport through Radix collision handling. The drawer uses internal scrolling and bottom safe-area padding.
The disclosure supports Escape dismissal and focus return. Touch rows use a minimum active height of 44px.