fixing mobile

components/MainContent.js

@@ -34,7 +34,7 @@ const MainContent = ({
   createPopParticles
 }) => {
   return (
-    <>
+    <div className="w-full flex flex-col items-center space-y-2">
       {/* Conditionally render Prompt Editor based on device */}
       {!isMobile && (
         <PromptEditor 
@@ -102,7 +102,7 @@ const MainContent = ({
           isMobile={isMobile}
         />
       )}
-    </>
+    </div>
   );
 };
 

components/PromptEditor.js

@@ -2,15 +2,20 @@ import { useState } from 'react';
 
 const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
   const [isEditingPrompt, setIsEditingPrompt] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(isMobile); // Collapsed by default on mobile
   const [tempPrompt, setTempPrompt] = useState("");
 
   return (
-    <div className={`w-full max-w-4xl ${isMobile ? 'mt-4 mb-6' : 'mb-4'}`}>
+    <div className={`w-full max-w-4xl ${isMobile ? 'mt-2 mb-4' : 'mb-4'}`}>
       <div className="flex justify-between items-center mb-1">
-        <label htmlFor="system-prompt" className={`block ${isMobile ? 'text-xs' : 'text-sm'} font-medium text-gray-700`}>
-          System Prompt
+        <label 
+          htmlFor="system-prompt" 
+          className={`block ${isMobile ? 'text-xs' : 'text-sm'} font-medium text-gray-700 cursor-pointer`}
+          onClick={() => isMobile && setIsCollapsed(!isCollapsed)}
+        >
+          System Prompt {isMobile && (isCollapsed ? '▼' : '▲')}
         </label>
-        {!isEditingPrompt ? (
+        {!isEditingPrompt && !isCollapsed ? (
           <button
             onClick={() => {
               setTempPrompt(customPrompt);
@@ -26,49 +31,53 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
         ) : null}
       </div>
       
-      {isEditingPrompt ? (
-        <div>
-          <textarea
-            id="system-prompt"
-            value={tempPrompt}
-            onChange={(e) => setTempPrompt(e.target.value)}
-            onKeyDown={(e) => {
-              // Save on Ctrl+Enter or Cmd+Enter
-              if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                e.preventDefault();
-                setCustomPrompt(tempPrompt);
-                setIsEditingPrompt(false);
-              }
-            }}
-            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={`${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 ${isMobile ? 'text-xs' : 'text-sm'} text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100`}
-            >
-              Cancel
-            </button>
-            <button
-              onClick={() => {
-                setCustomPrompt(tempPrompt);
-                setIsEditingPrompt(false);
-              }}
-              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 ${isMobile ? 'text-xs' : 'text-sm'} text-gray-800 whitespace-pre-wrap max-h-${isMobile ? '24' : '32'} overflow-y-auto`}>
-          {customPrompt}
-        </div>
+      {!isCollapsed && (
+        <>
+          {isEditingPrompt ? (
+            <div>
+              <textarea
+                id="system-prompt"
+                value={tempPrompt}
+                onChange={(e) => setTempPrompt(e.target.value)}
+                onKeyDown={(e) => {
+                  // Save on Ctrl+Enter or Cmd+Enter
+                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    setCustomPrompt(tempPrompt);
+                    setIsEditingPrompt(false);
+                  }
+                }}
+                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={`${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 ${isMobile ? 'text-xs' : 'text-sm'} text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100`}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => {
+                    setCustomPrompt(tempPrompt);
+                    setIsEditingPrompt(false);
+                  }}
+                  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-2 bg-gray-50 border border-gray-200 rounded-lg ${isMobile ? 'text-xs' : 'text-sm'} text-gray-800 whitespace-pre-wrap ${isMobile ? 'max-h-20' : 'max-h-32'} overflow-y-auto`}>
+              {customPrompt}
+            </div>
+          )}
+        </>
       )}
     </div>
   );

hooks/useDeviceAndCanvas.js

@@ -45,7 +45,16 @@ const useDeviceAndCanvas = () => {
     const containerWidth = document.querySelector('.canvas-container')?.clientWidth || window.innerWidth;
     // Set maximum width for the canvas - increased for desktop
     const maxWidth = Math.min(containerWidth, isMobile ? 640 : 960);
-    const height = maxWidth / aspectRatio;
+    let height = maxWidth / aspectRatio;
+    
+    // Limit height on mobile to ensure system prompt is visible without scrolling
+    if (isMobile) {
+      const viewportHeight = window.innerHeight;
+      // Use a fixed height on mobile that's appropriate for most devices
+      // This ensures the camera and prompt are both visible without scrolling
+      const maxMobileHeight = Math.min(viewportHeight * 0.5, 350); // 50% of viewport or 350px max
+      height = Math.min(height, maxMobileHeight);
+    }
     
     setCanvasWidth(maxWidth);
     setCanvasHeight(height);

pages/index.js

@@ -11,7 +11,7 @@ const inter = Inter({ subsets: ['latin'] });
 
 const Header = () => {
   return (
-    <div className="sticky 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-3 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>
@@ -47,8 +47,10 @@ export default function Home() {
         <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-start p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto">
-        <HandDetector />
+      <main className="flex min-h-screen flex-col items-center justify-start p-3 bg-white font-['Google_Sans',sans-serif] pt-16">
+        <div className="w-full max-w-4xl flex flex-col items-center">
+          <HandDetector />
+        </div>
       </main>
     </>
   );