fix(web): eliminate model selector flicker on rapid toggling

[leoisadev1]

Summary

• Eliminates visual flicker when spam-clicking the model selector dropdown
• Fixes animation glitches that occurred during rapid open/close toggling

Changes

• CSS Transitions over Animations: Replaced CSS animations (animate-in/animate-out) with CSS transitions for smoother, interruptible state changes
• Persistent Portal Mounting: Portal stays in DOM after first open (hasEverOpened pattern) to prevent unmount/remount flicker
• Atomic State Updates: Use flushSync to batch state changes and prevent intermediate renders
• Pointer Events Control: Add pointer-events-none when hidden to prevent interaction with invisible content
• Layout Stability: Add scrollbar-gutter: stable to prevent layout shifts
• Clean Exit Animations: Add [data-state="closed"] { overflow: hidden } for clean exit transitions

Technical Details

The flicker was caused by:

1. Portal unmounting/remounting on rapid state changes
2. CSS animations restarting when classes changed mid-animation
3. React rendering intermediate states during rapid toggling

The fix follows patterns from production UI libraries (Radix UI, Headless UI):

1. Keep portal mounted to avoid DOM churn
2. Use CSS transitions which interpolate smoothly even when interrupted
3. Use flushSync for atomic state updates

[railway-app]

🚅 Deployed to the openchat-pr-499 environment in OpenChat

Service	Status	Web	Updated (UTC)
web	✅ Success (View Logs)	Web	Jan 8, 2026 at 11:33 pm

[github-actions]

🚀 Preview Deployment Ready

Environment	URL
Frontend	https://web-openchat-pr-499.up.railway.app
Convex Dashboard	Dashboard

Convex Preview Backend

• Cloud URL: https://clear-stingray-3.convex.cloud
• Site URL: https://clear-stingray-3.convex.site

---

_{🤖 Deployed automatically by GitHub Actions}

[leoisadev1]

@greptile review