From 1514c6470e095526f7ffc42fcdc5ae7272a78875 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 16:12:52 +1000
Subject: [PATCH] Add cursor pointer to X button and click-outside-to-dismiss

- Add cursor-pointer class to modal X button
- Add onClick handler to backdrop overlay to close modal
- Add stopPropagation to modal content to prevent backdrop clicks
- Now modal can be dismissed by clicking outside or using X button
---
 examples/chat-ui/src/components/McpServerModal.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/examples/chat-ui/src/components/McpServerModal.tsx b/examples/chat-ui/src/components/McpServerModal.tsx
index d649d64..a70118b 100644
--- a/examples/chat-ui/src/components/McpServerModal.tsx
+++ b/examples/chat-ui/src/components/McpServerModal.tsx
@@ -187,13 +187,19 @@ const McpServerModal: React.FC<McpServerModalProps> = ({
 
   return (
     <>
-      <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 ${isOpen ? 'block' : 'hidden'}`}>
-        <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 ${isOpen ? 'block' : 'hidden'}`}
+        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">MCP Servers</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>