From c673745b09151b4c8a9f532e992c7ce39489f7d5 Mon Sep 17 00:00:00 2001
From: Jose Luis <josele.96@gmail.com>
Date: Sat, 21 Mar 2026 20:49:13 +0100
Subject: [PATCH] fix: Workshop mobile layout + navigation from all modes

Mobile:
- Workshop nav tabs full-width, hide logo, hide hero header
- Search/sort/share go full-width stacked
- Tags scroll horizontally
- Share button large and prominent
- Patch cards single column, shorter previews
- Auth modal fits mobile viewport

Navigation:
- Workshop button in Sandbox hamburger menu (mobile)
- Workshop tab in WorldMap mobile tab bar
- GameApp passes onWorkshop prop through to WorldMap

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/client/src/App.jsx           |  5 +++++
 packages/client/src/game/GameApp.jsx  |  3 ++-
 packages/client/src/game/WorldMap.jsx |  4 +++-
 packages/client/src/index.css         | 21 +++++++++++++++++----
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/App.jsx b/packages/client/src/App.jsx
index af9caf1..b0b2082 100644
--- a/packages/client/src/App.jsx
+++ b/packages/client/src/App.jsx
@@ -354,6 +354,11 @@ export default function App({ onSwitchToGame, onSwitchToWorkshop }) {
               🎮 Chiptune Demo
             </button>
             <button className="toolbar-btn" onClick={() => { handleClearCanvas(); setMenuOpen(false); }}>🗑 Limpiar</button>
+            {onSwitchToWorkshop && (
+              <button className="toolbar-btn" onClick={() => { setMenuOpen(false); onSwitchToWorkshop(); }} style={{ color: 'var(--accent)' }}>
+                🎵 Workshop
+              </button>
+            )}
           </div>
         </div>
       )}
diff --git a/packages/client/src/game/GameApp.jsx b/packages/client/src/game/GameApp.jsx
index 3872f1a..d03360a 100644
--- a/packages/client/src/game/GameApp.jsx
+++ b/packages/client/src/game/GameApp.jsx
@@ -17,7 +17,7 @@ import { WORLD_12 } from './levels/world12.js';
 
 const allWorlds = [WORLD_1, WORLD_2, WORLD_3, WORLD_4, WORLD_5, WORLD_6, WORLD_7, WORLD_8, WORLD_9, WORLD_10, WORLD_11, WORLD_12];
 
-export default function GameApp({ onSwitchToSandbox }) {
+export default function GameApp({ onSwitchToSandbox, onSwitchToWorkshop }) {
   const [view, setView] = useState('map');
   const [currentLevel, setCurrentLevel] = useState(null);
   const [currentLevelIndex, setCurrentLevelIndex] = useState(0);
@@ -78,6 +78,7 @@ export default function GameApp({ onSwitchToSandbox }) {
       <WorldMap
         onSelectLevel={handleSelectLevel}
         onSandbox={onSwitchToSandbox}
+        onWorkshop={onSwitchToWorkshop}
         onAdmin={() => setShowAdmin(true)}
       />
       {showAdmin && (
diff --git a/packages/client/src/game/WorldMap.jsx b/packages/client/src/game/WorldMap.jsx
index ad67342..aac2265 100644
--- a/packages/client/src/game/WorldMap.jsx
+++ b/packages/client/src/game/WorldMap.jsx
@@ -45,10 +45,11 @@ function isWorldUnlocked(world) {
 const MOBILE_TABS = [
   { id: 'game', label: 'JUEGO', icon: '🎮' },
   { id: 'sandbox', label: 'SANDBOX', icon: '🎛' },
+  { id: 'workshop', label: 'WORKSHOP', icon: '🎵' },
   { id: 'config', label: 'CONFIG', icon: '⚙' },
 ];
 
-export default function WorldMap({ onSelectLevel, onSandbox, onAdmin }) {
+export default function WorldMap({ onSelectLevel, onSandbox, onAdmin, onWorkshop }) {
   const totalStars = getTotalStars();
   const maxStars = getMaxStars();
   const [search, setSearch] = useState('');
@@ -236,6 +237,7 @@ export default function WorldMap({ onSelectLevel, onSandbox, onAdmin }) {
           activeTab="game"
           onTabChange={(id) => {
             if (id === 'sandbox') onSandbox?.();
+            if (id === 'workshop') onWorkshop?.();
             if (id === 'config') onAdmin?.();
           }}
         />
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index 8c5cb35..cc1765a 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -1006,11 +1006,24 @@ input, textarea, [contenteditable] { -webkit-user-select: text; user-select: tex
 .ws-load-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }
 
 @media (max-width: 768px) {
-  .ws-page { padding: 16px; gap: 16px; }
+  .ws-page { padding: 12px; gap: 12px; height: 100dvh; }
+  .ws-nav { flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
+  .ws-nav-logo { display: none; }
+  .ws-nav-tabs { width: 100%; gap: 2px; }
+  .ws-nav-tab { flex: 1; text-align: center; font-size: 12px; padding: 8px 4px; }
+  .ws-header { display: none; }
   .ws-title { font-size: 22px; }
-  .ws-toolbar { flex-direction: column; }
-  .ws-tags { overflow-x: auto; flex-wrap: nowrap; }
-  .ws-grid { grid-template-columns: 1fr; }
+  .ws-toolbar { flex-direction: column; gap: 8px; }
+  .ws-search { min-width: unset; }
+  .ws-tags { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
+  .ws-sort { width: 100%; }
+  .ws-share-btn { width: 100%; text-align: center; padding: 12px; font-size: 14px; }
+  .ws-grid { grid-template-columns: 1fr; gap: 10px; }
+  .ws-card-preview { height: 60px; }
+  .ws-card-body { padding: 10px 12px; }
+  .user-badge { padding: 4px 8px; }
+  .login-btn { padding: 6px 12px; }
+  .auth-card { padding: 24px 20px; max-height: 90vh; overflow-y: auto; }
 }
 
 /* ===== Fullscreen Keyboard ===== */