fix(pickers): set off '+ Create' row in its own band (MAPPS-320) #367

Merged
Claude-Run merged 1 commit from fix/MAPPS-320-create-row-visual-separation into main 2026-06-26 08:33:46 +02:00
Member

The CompanyPicker and ContactPicker dropdowns placed the inline '+ Create' row flush against the existing-match rows with identical row height and only a hairline border, so a hurried click meant for the highlighted match above could land on Create and spawn a duplicate company/contact (QA hit this twice across runs).

Render the Create affordance in a visually separate band: a 4px top gap (mt-1) above the existing top border, a muted bg-surface-2/50 background so the row reads as a different action, and a leading PlusIcon in place of the inline '+' glyph. The distinct hover (hover:bg-accent-50) is retained. The row stays in the same DOM position inside the dropdown, so Up/Down/Enter keyboard navigation still reaches it from the last match. The empty-state ('No matches' / 'No companies yet') branch gets the same treatment with no rendering regression.

#MAPPS-320

The CompanyPicker and ContactPicker dropdowns placed the inline '+ Create' row flush against the existing-match rows with identical row height and only a hairline border, so a hurried click meant for the highlighted match above could land on Create and spawn a duplicate company/contact (QA hit this twice across runs). Render the Create affordance in a visually separate band: a 4px top gap (mt-1) above the existing top border, a muted bg-surface-2/50 background so the row reads as a different action, and a leading PlusIcon in place of the inline '+' glyph. The distinct hover (hover:bg-accent-50) is retained. The row stays in the same DOM position inside the dropdown, so Up/Down/Enter keyboard navigation still reaches it from the last match. The empty-state ('No matches' / 'No companies yet') branch gets the same treatment with no rendering regression. #MAPPS-320
fix(pickers): set off '+ Create' row in its own band (MAPPS-320)
All checks were successful
Check / fmt + clippy + tests (pull_request) Successful in 1m32s
Create release / Create release from merged PR (pull_request) Has been skipped
5861521bec
The CompanyPicker and ContactPicker dropdowns placed the inline '+ Create' row flush against the existing-match rows with identical row height and only a hairline border, so a hurried click meant for the highlighted match above could land on Create and spawn a duplicate company/contact (QA hit this twice across runs).

Render the Create affordance in a visually separate band: a 4px top gap (mt-1) above the existing top border, a muted bg-surface-2/50 background so the row reads as a different action, and a leading PlusIcon in place of the inline '+' glyph. The distinct hover (hover:bg-accent-50) is retained. The row stays in the same DOM position inside the dropdown, so Up/Down/Enter keyboard navigation still reaches it from the last match. The empty-state ('No matches' / 'No companies yet') branch gets the same treatment with no rendering regression.

#MAPPS-320
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/mokosh-apps!367
No description provided.