Skip to content
This repository was archived by the owner on Feb 6, 2026. It is now read-only.

Commit 1f80d70

Browse files
committed
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
1 parent 1514c64 commit 1f80d70

File tree

1 file changed

+9
-3
lines changed

1 file changed

+9
-3
lines changed

examples/chat-ui/src/components/ModelSelectionModal.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,19 @@ const ModelSelectionModal: React.FC<ModelSelectionModalProps> = ({
8686

8787
return (
8888
<>
89-
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
90-
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
89+
<div
90+
className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
91+
onClick={onClose}
92+
>
93+
<div
94+
className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
95+
onClick={(e) => e.stopPropagation()}
96+
>
9197
<div className="flex items-center justify-between p-6 border-b border-zinc-200">
9298
<h2 className="text-xl font-semibold text-zinc-900">Select Model</h2>
9399
<button
94100
onClick={onClose}
95-
className="text-zinc-400 hover:text-zinc-600 p-1"
101+
className="text-zinc-400 hover:text-zinc-600 p-1 cursor-pointer"
96102
>
97103
<X size={24} />
98104
</button>

0 commit comments

Comments
 (0)