/* ========================================================================== WidgetMaker — Mobile / Tablet Layout -------------------------------------------------------------------------- Activated on viewports narrower than 900px by adding `mobile-mode` to via js/mobile-layout.js. Desktop WidgetMaker is a wide 3-column editor (Toolbox | Workspace + Phone Preview | Properties). On phones/tablets that layout squashes, so instead of squeezing the columns we switch to a single-viewport, tabbed layout: Header (compact: Back + logo + scrollable actions + Export) ────────────────────────────────────────────── [ active panel fills the rest of the viewport ] ────────────────────────────────────────────── Bottom nav: 🎨 Toolbox 🧩 Workspace 📱 Preview ⚙️ Properties ========================================================================== */ .wm-mobile-nav { display: none; } @media (max-width: 900px) { body.mobile-mode { --wm-mobile-nav-h: 60px; overflow: hidden; overscroll-behavior: none; } /* ---------- App shell ---------- */ body.mobile-mode .app-container { height: 100dvh; height: 100vh; overflow: hidden; } /* ---------- Compact header ---------- */ body.mobile-mode .header { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; } body.mobile-mode .header-left { gap: 8px; flex-shrink: 0; } body.mobile-mode .logo-image { height: 26px; } body.mobile-mode .subtitle { display: none; } body.mobile-mode .header-actions { gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1; justify-content: flex-end; scrollbar-width: none; } body.mobile-mode .header-actions::-webkit-scrollbar { display: none; } body.mobile-mode .header-actions button { padding: 8px 12px; font-size: 12px; white-space: nowrap; flex-shrink: 0; } /* Hide the space-hungry secondary actions; keep Export Widget prominent */ body.mobile-mode #btn-guide, body.mobile-mode #btn-load-template, body.mobile-mode #btn-save-template, body.mobile-mode #btn-project-export, body.mobile-mode #btn-project-import, body.mobile-mode #btn-fullscreen, body.mobile-mode #btn-restart, body.mobile-mode #btn-debug, body.mobile-mode #btn-test-runtime, body.mobile-mode #btn-clear { display: none; } body.mobile-mode #btn-export { padding: 9px 14px; } /* Back to Studio link injected into the header */ body.mobile-mode .wm-back-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; flex-shrink: 0; } body.mobile-mode .wm-back-link:active { background: rgba(255, 255, 255, 0.14); } /* ---------- Main layout: single stacked panel ---------- */ body.mobile-mode .main-layout { display: flex; flex-direction: column; width: 100%; height: calc(100dvh - var(--wm-header-h, 58px) - var(--wm-mobile-nav-h, 60px)); height: calc(100vh - var(--wm-header-h, 58px) - var(--wm-mobile-nav-h, 60px)); overflow: hidden; --w-left: auto; --w-right: auto; } /* Force every column full-width, then hide all except the active view */ body.mobile-mode [class^="column-"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; padding: 8px !important; gap: 8px !important; border: none !important; display: none; } body.mobile-mode .column-middle { flex-direction: column; } body.mobile-mode .workspace-section, body.mobile-mode .phone-preview-section { display: none; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; padding: 0 !important; gap: 8px !important; flex: 1 1 100% !important; } /* Active-view selectors */ body.mobile-mode.mv-toolbox .column-left { display: flex; } body.mobile-mode.mv-workspace .column-middle { display: flex; } body.mobile-mode.mv-workspace .workspace-section { display: flex; } body.mobile-mode.mv-preview .column-middle { display: flex; } body.mobile-mode.mv-preview .phone-preview-section { display: flex; } body.mobile-mode.mv-properties .column-right { display: flex; } /* ---------- Panels ---------- */ body.mobile-mode .glass-panel { border-radius: 16px; } body.mobile-mode .panel-title { padding: 10px 12px; font-size: 12px; } body.mobile-mode #panel-properties { min-height: 0; } /* ---------- Node editor fills available space ---------- */ body.mobile-mode .node-editor-container { min-height: 0; border-radius: 16px; } body.mobile-mode #node-canvas { display: block; } /* ---------- Phone preview fills available space ---------- */ body.mobile-mode .visual-editor-container, body.mobile-mode .phone-aspect, body.mobile-mode #panel-visual-canvas { min-width: 0 !important; width: 100% !important; height: 100% !important; } body.mobile-mode .phone-aspect { margin: 8px !important; border-radius: 24px !important; border-width: 6px !important; } /* ---------- Bottom navigation ---------- */ body.mobile-mode .wm-mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--wm-mobile-nav-h, 60px); z-index: 5000; background: rgba(13, 13, 18, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); padding-bottom: env(safe-area-inset-bottom, 0px); } body.mobile-mode .wm-mobile-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.55); font-size: 10px; font-weight: 700; padding: 4px 2px; min-width: 0; overflow: hidden; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 0; } body.mobile-mode .wm-mobile-nav button::before { display: none !important; } body.mobile-mode .wm-mobile-nav button .nav-ico { font-size: 19px; line-height: 1; } body.mobile-mode .wm-mobile-nav button.active { color: #6cff39; background: linear-gradient(180deg, rgba(108, 255, 57, 0.12), transparent) !important; } body.mobile-mode .wm-mobile-nav button.active .nav-ico { filter: drop-shadow(0 0 6px rgba(108, 255, 57, 0.6)); } }