fixing mobile

components/CameraSetup.js

@@ -183,9 +183,7 @@ const CameraSetup = ({
           aria-label={`Switch to ${facingMode === 'user' ? 'back' : 'front'} camera`}
         >
           <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.5 7.5L9.5 12.5" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
           </svg>
         </button>
       )}

components/HandDetector.js

@@ -32,6 +32,13 @@ const HandDetector = () => {
     updateCanvasSize 
   } = useDeviceAndCanvas();
   
+  // Set default camera to back camera on mobile devices
+  useEffect(() => {
+    if (isMobile) {
+      setFacingMode('environment');
+    }
+  }, [isMobile]);
+  
   const {
     handDetected,
     isMouthOpen,

components/MainContent.js

@@ -35,12 +35,14 @@ const MainContent = ({
 }) => {
   return (
     <>
-      {/* Prompt Editor */}
-      <PromptEditor 
-        customPrompt={customPrompt} 
-        setCustomPrompt={setCustomPrompt} 
-        isMac={isMac} 
-      />
+      {/* Conditionally render Prompt Editor based on device */}
+      {!isMobile && (
+        <PromptEditor 
+          customPrompt={customPrompt} 
+          setCustomPrompt={setCustomPrompt} 
+          isMac={isMac} 
+        />
+      )}
       
       <div ref={containerRef} className="relative w-full max-w-4xl canvas-container">
         {/* Camera Setup */}
@@ -90,6 +92,16 @@ const MainContent = ({
           createPopParticles={createPopParticles}
         />
       </div>
+      
+      {/* Render Prompt Editor below camera on mobile */}
+      {isMobile && (
+        <PromptEditor 
+          customPrompt={customPrompt} 
+          setCustomPrompt={setCustomPrompt} 
+          isMac={isMac}
+          isMobile={isMobile}
+        />
+      )}
     </>
   );
 };

components/PromptEditor.js

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 
-const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
+const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
   const [isEditingPrompt, setIsEditingPrompt] = useState(false);
   const [tempPrompt, setTempPrompt] = useState("");
 
   return (
-    <div className="w-full max-w-4xl mb-4">
+    <div className={`w-full max-w-4xl ${isMobile ? 'mt-4 mb-6' : 'mb-4'}`}>
       <div 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 ${isMobile ? 'text-xs' : 'text-sm'} font-medium text-gray-700`}>
           System Prompt
         </label>
         {!isEditingPrompt ? (
@@ -16,9 +16,9 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
               setTempPrompt(customPrompt);
               setIsEditingPrompt(true);
             }}
-            className="text-sm text-blue-600 hover:text-blue-800 flex items-center"
+            className={`${isMobile ? 'text-xs' : 'text-sm'} text-blue-600 hover:text-blue-800 flex items-center`}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" className={`${isMobile ? 'h-3 w-3' : '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" />
             </svg>
             Edit
@@ -40,17 +40,17 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
                 setIsEditingPrompt(false);
               }
             }}
-            className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
-            rows={4}
+            className={`w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 ${isMobile ? 'text-xs' : 'text-sm'}`}
+            rows={isMobile ? 3 : 4}
             placeholder="Enter your custom prompt for Gemini..."
           />
           <div className="flex justify-end mt-2 space-x-2">
-            <span className="text-xs text-gray-500 self-center mr-auto">
+            <span className={`${isMobile ? 'text-xxs' : 'text-xs'} text-gray-500 self-center mr-auto`}>
               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"
+              className={`px-3 py-1 ${isMobile ? 'text-xs' : 'text-sm'} text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100`}
             >
               Cancel
             </button>
@@ -59,14 +59,14 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
                 setCustomPrompt(tempPrompt);
                 setIsEditingPrompt(false);
               }}
-              className="px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
+              className={`px-3 py-1 ${isMobile ? 'text-xs' : 'text-sm'} text-white bg-blue-600 rounded-md hover:bg-blue-700`}
             >
               Save
             </button>
           </div>
         </div>
       ) : (
-        <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-800 whitespace-pre-wrap">
+        <div className={`p-3 bg-gray-50 border border-gray-200 rounded-lg ${isMobile ? 'text-xs' : 'text-sm'} text-gray-800 whitespace-pre-wrap max-h-${isMobile ? '24' : '32'} overflow-y-auto`}>
           {customPrompt}
         </div>
       )}

pages/index.js

@@ -11,7 +11,7 @@ const inter = Inter({ subsets: ['latin'] });
 
 const Header = () => {
   return (
-    <div className="fixed top-0 left-0 right-0 w-full bg-white p-4 z-50 shadow-sm">
+    <div className="sticky top-0 left-0 right-0 w-full bg-white p-4 z-50 shadow-sm">
       <div className="w-full flex justify-between items-center text-base max-w-7xl mx-auto">
         <div className="text-gray-500">
           <span className="text-black font-bold text-lg mr-2">HandSpew</span>
@@ -42,12 +42,12 @@ export default function Home() {
       <Head>
         <title>HandSpew</title>
         <meta name="description" content="Generate thoughts based on hand gestures using MediaPipe and Gemini" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <link rel="icon" href="/favicon.ico" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" />
       </Head>
       <Header />
-      <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20">
+      <main className="flex min-h-screen flex-col items-center justify-start p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto">
         <HandDetector />
       </main>
     </>

styles/globals.css

@@ -16,10 +16,18 @@
   }
 }
 
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: 'Google Sans', Arial, Helvetica, sans-serif;
+  position: relative;
 }
 
 /* Minimal thought bubble styling */
@@ -66,4 +74,10 @@ body {
     font-size: 12px;
     line-height: 1.3;
   }
+  
+  /* Add text-xxs class for very small text on mobile */
+  .text-xxs {
+    font-size: 0.65rem;
+    line-height: 1rem;
+  }
 }