Fix pixel persistence, improve mobile

- Fix pixel data storage to include user information (userId, username, timestamp)
- Enhance zoom controls to center properly without drift
- Improve mobile modal centering with flexbox layout
- Add dynamic backend URL detection for network access
- Fix CORS configuration for development mode
- Add mobile-optimized touch targets and safe area support

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/hooks/useWebSocket.ts

@@ -57,7 +57,23 @@ export function useWebSocket({
   };
 
   useEffect(() => {
-    const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3001';
+    // Dynamically determine backend URL based on current hostname
+    const getBackendUrl = () => {
+      if (typeof window === 'undefined') return 'http://localhost:3001';
+      
+      const currentHost = window.location.hostname;
+      const backendPort = '3001';
+      
+      // If we have a custom backend URL from env, use it
+      if (process.env.NEXT_PUBLIC_BACKEND_URL) {
+        return process.env.NEXT_PUBLIC_BACKEND_URL;
+      }
+      
+      // Otherwise, use the same hostname as frontend but with backend port
+      return `http://${currentHost}:${backendPort}`;
+    };
+    
+    const backendUrl = getBackendUrl();
     console.log('🔌 Initializing WebSocket connection to:', backendUrl);
     
     const newSocket = io(backendUrl, {