Fix pixel persistence and improve mobile UX

- 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>

backend/src/services/WebSocketService.ts

@@ -151,7 +151,8 @@ export class WebSocketService {
       message.x,
       message.y,
       message.color,
-      userId
+      userId,
+      socket.data.username
     );
 
     if (success) {
@@ -187,12 +188,15 @@ export class WebSocketService {
       const chunk = await this.canvasService.getChunk(canvasId, message.chunkX, message.chunkY);
       
       if (chunk) {
-        const pixels = Array.from(chunk.pixels.entries()).map(([key, color]) => {
+        const pixels = Array.from(chunk.pixels.entries()).map(([key, pixelInfo]) => {
           const [localX, localY] = key.split(',').map(Number);
           return {
             x: message.chunkX * 64 + localX,
             y: message.chunkY * 64 + localY,
-            color
+            color: pixelInfo.color,
+            userId: pixelInfo.userId,
+            username: pixelInfo.username,
+            timestamp: pixelInfo.timestamp
           };
         });