save button on mobile

components/PromptEditor.js

@@ -10,24 +10,41 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
     setIsCollapsed(isMobile);
   }, [isMobile]);
 
+  const handleSave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCustomPrompt(tempPrompt);
+    setIsEditingPrompt(false);
+  };
+
+  const handleCancel = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsEditingPrompt(false);
+  };
+
   return (
     <div className={`w-full max-w-4xl ${isMobile ? 'mt-4' : 'mb-4'}`}>
       <div 
-        className="flex justify-between items-center mb-1 cursor-pointer" 
-        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="flex justify-between items-center mb-1" 
       >
-        <label htmlFor="system-prompt" className="block text-sm font-medium text-gray-700">
+        <label 
+          htmlFor="system-prompt" 
+          className="block text-sm font-medium text-gray-700 cursor-pointer flex-grow"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
           System Prompt
         </label>
         <div className="flex items-center">
           {!isEditingPrompt && !isCollapsed && (
             <button
               onClick={(e) => {
-                e.stopPropagation(); // Prevent triggering the parent onClick
+                e.preventDefault();
+                e.stopPropagation();
                 setTempPrompt(customPrompt);
                 setIsEditingPrompt(true);
               }}
-              className="text-sm text-blue-600 hover:text-blue-800 flex items-center mr-2"
+              className="text-sm text-blue-600 hover:text-blue-800 flex items-center mr-2 p-2"
             >
               <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
@@ -35,23 +52,29 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
               Edit
             </button>
           )}
-          {/* Down/Up caret icon */}
-          <svg 
-            xmlns="http://www.w3.org/2000/svg" 
-            className={`h-5 w-5 text-gray-500 transition-transform duration-200 ${isCollapsed ? '' : 'transform rotate-180'}`} 
-            fill="none" 
-            viewBox="0 0 24 24" 
-            stroke="currentColor"
+          {/* Down/Up caret icon with increased touch target */}
+          <button
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className="p-2"
+            aria-label={isCollapsed ? 'Expand prompt' : 'Collapse prompt'}
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
+            <svg 
+              xmlns="http://www.w3.org/2000/svg" 
+              className={`h-5 w-5 text-gray-500 transition-transform duration-200 ${isCollapsed ? '' : 'transform rotate-180'}`} 
+              fill="none" 
+              viewBox="0 0 24 24" 
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
         </div>
       </div>
       
       {!isCollapsed && (
         <>
           {isEditingPrompt ? (
-            <div>
+            <div onClick={(e) => e.stopPropagation()}>
               <textarea
                 id="system-prompt"
                 value={tempPrompt}
@@ -60,8 +83,7 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
                   // Save on Ctrl+Enter or Cmd+Enter
                   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                     e.preventDefault();
-                    setCustomPrompt(tempPrompt);
-                    setIsEditingPrompt(false);
+                    handleSave(e);
                   }
                 }}
                 className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
@@ -73,17 +95,14 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
                   Tip: Press {isMac ? '⌘' : 'Ctrl'}+Enter to save
                 </span>
                 <button
-                  onClick={() => setIsEditingPrompt(false)}
-                  className="px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100"
+                  onClick={handleCancel}
+                  className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100 min-w-[60px]"
                 >
                   Cancel
                 </button>
                 <button
-                  onClick={() => {
-                    setCustomPrompt(tempPrompt);
-                    setIsEditingPrompt(false);
-                  }}
-                  className="px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
+                  onClick={handleSave}
+                  className="px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 min-w-[60px]"
                 >
                   Save
                 </button>