Add cursor pointer and click-outside-to-dismiss to model selector modal

- Add cursor-pointer class to X button in ModelSelectionModal
- Add onClick handler to backdrop overlay to close modal
- Add stopPropagation to modal content to prevent backdrop clicks
- Consistent modal behavior between model selector and MCP server modals
This commit is contained in:
Glen Maddern 2025-06-23 16:13:33 +10:00
commit 1f80d7040b

View file

@ -86,13 +86,19 @@ const ModelSelectionModal: React.FC<ModelSelectionModalProps> = ({
return (
<>
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
<div
className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
onClick={onClose}
>
<div
className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between p-6 border-b border-zinc-200">
<h2 className="text-xl font-semibold text-zinc-900">Select Model</h2>
<button
onClick={onClose}
className="text-zinc-400 hover:text-zinc-600 p-1"
className="text-zinc-400 hover:text-zinc-600 p-1 cursor-pointer"
>
<X size={24} />
</button>