fix(web): close model selector on outside click

[vorflux]

Problem

Clicking outside the model selector dropdown did not close it. The previous implementation used a <button className="fixed inset-0 z-40"> backdrop overlay, but position: fixed is broken when an ancestor has backdrop-blur, transform, filter, or will-change — it becomes relative to that ancestor instead of the viewport. The chat container uses backdrop-blur-md, which caused the backdrop button to not cover the full page.

Fix

Replaced the fragile fixed-position backdrop with a useEffect that attaches a mousedown listener on document when the dropdown is open. It checks if the click target is outside the component ref and closes the dropdown if so. The listener is cleaned up when the dropdown closes.

Testing

Logic verified by code review — the document.addEventListener('mousedown', ...) approach is not affected by CSS stacking context issues since it operates at the DOM event level, not via z-index/positioning.

---

Session Details

• Session: View Session
• Requested by: Mahesh Sanikommu (mahesh@supermemory.com)
• Address comments on this PR. Add (aside) to your comment to have me ignore it.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	supermemory-mcp	d4aad57	May 19 2026, 09:17 PM

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	supermemory-app	d4aad57	Commit Preview URL Branch Preview URL	May 19 2026, 09:18 PM

[claude]

Claude finished @MaheshtheDev's task in 50s —— View job

---

Code Review Complete

• Analyzing PR context
• Reviewing diff for bugs and security issues
• Checking surrounding code for edge cases
• Submitting review

---

Overview: Replaces a fragile fixed-position backdrop with a document-level mousedown listener to close the model selector dropdown on outside clicks.

Issues found: None — this looks good to ship.

The implementation follows React best practices:

• Event listener is properly cleaned up when isOpen becomes false or component unmounts
• Ref null-check guards against edge cases
• mousedown (vs click) provides responsive UX by closing immediately when click starts
• useEffect ensures SSR compatibility since document is only accessed client-side

Score: 10/10

Clean, focused fix that correctly addresses the CSS stacking context issue without introducing new bugs or complexity.