[Bug] Project icon picker flickers the whole UI; second click cancels — cannot set a project icon

[h4yfans]

Reported by: Aurelie Kabore — Windows 10, v2026.718.3
Area: Projects (task system) — icon picker
Verdict: Real

Symptom

"When I went to create a project and clicked to give an icon, it flickered the whole interface, then I click again and because it is out of focus it thinks I want to cancel it. I tried again and again to choose an icon, but it won't work."

Root cause

project-modal.tsx renders a Radix Dialog; the lucide IconPicker is a sibling outside DialogContent (components/tasks/project-modal.tsx:394). The dialog toggles Radix modal while open: <Dialog modal={!isIconPickerOpen}> (:257) — clicking the icon button sets isIconPickerOpen=true, flipping modal true->false. DialogContent always mounts DialogOverlay (fixed inset-0 bg-black/80, ui/dialog.tsx:38-39); Radix only renders the overlay in modal mode, so the flip tears down the backdrop + RemoveScroll scroll-lock + focus trap and rebuilds them when the picker closes -> backdrop popping, scrollbar reflow, focus churn = "flickers the entire interface." With the dialog now non-modal and the picker outside DialogContent, its DismissableLayer treats interaction as outside and the picker's own document mousedown handler (icon-picker.tsx:398) competes; the dropped scroll-lock reflows the measured icon-button rect, so the panel sits at a stale position and the user's second click lands outside -> handleClickOutside -> onClose() -> picker closes, icon never set.

Fix direction

Stop toggling modal; keep the Dialog modal and render IconPicker inside DialogContent, or migrate project icons to the EmojiPicker-in-Popover (embedded) pattern from tag-icon-chip.tsx.

Acceptance

• Opening the project icon picker does not flicker the app; selecting an icon sets it reliably on the first attempt.

---

Part of #795