/* lab.css — Builder Lab (the Blockly + Monaco game editor inside the Account app). Loaded AFTER account.css and only ever ADDS to it: every colour, font, radius and shadow here comes from the account.css design tokens (--blue / --grad-blue / --grad-panel / --panel-1|2 / --fg / --muted / --green / --red / --f-ui / --f-display / --f-mono / --shadow-btn) and its rgba(43,140,255,0.NN) border idiom. Nothing new is invented palette-wise. Structure (matching #tab-lab in index.html): shell breakout ▸ first run ▸ toolbar ▸ studio primitives ▸ view tabs ▸ body/panes/divider ▸ blocks pane ▸ sprites manager ▸ code pane ▸ validation bar ▸ run overlay ▸ history drawer ▸ preview bar ▸ modals ▸ responsive ▸ motion + focus */ /* ============================ shell breakout ============================ The Lab is a focused workspace: it fills the viewport under the app bar and scrolls INSIDE its panes rather than scrolling the page. Driven purely by :has() so no JS class is needed on . (The app bar and section tabs are full width for every tab — see account.css — so only the height behaviour and the tighter padding are Lab-specific.) */ .workspace:has(> #tab-lab:not([hidden])) { padding:16px 18px 0; display:flex; flex-direction:column; min-height:0; } /* Panels are capped to a readable column by default; a workspace wants the whole width. */ .tab-panel.studio { max-width:none; margin:0; } /* …but the first-run and template screens are ordinary pages, not a workspace, so they sit in the same column as Creator Hub. Restoring the standard workspace padding while the editor is hidden means the two line up EXACTLY at every width, with no per-breakpoint fudge factor to keep in sync — the tighter 18px gutter above exists for the editor alone. */ .workspace:has(#tab-lab:not([hidden]) #lab-editor[hidden]) { padding:26px 22px 0; } .workspace:has(> #tab-lab:not([hidden])) .tabs { margin-bottom:14px; } /* the page footer would force the page to scroll; the Lab owns the full height instead */ main:has(#tab-lab:not([hidden])) .legal-footer { display:none; } .tab-panel.studio { position:relative; } /* run overlay + drawer anchor here */ .tab-panel.studio:not([hidden]) { display:flex; flex-direction:column; flex:1; min-height:0; padding-bottom:16px; } /* ============================ first run / templates ============================ */ /* Same column as every other .tab-panel, so "Builder Lab" starts at the same x as "Creator Hub". */ .lab-firstrun { max-width:1180px; margin:0 auto; width:100%; } .lab-firstrun[hidden] { display:none; } .lab-crumbs { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin-bottom:18px; } /* Keep each crumb on one line — without this the flex items shrink and "Creator Hub" wraps to two. */ .lab-crumbs > * { flex:none; white-space:nowrap; } .linkbtn { background:none; border:none; padding:4px 2px; margin:0; cursor:pointer; font-family:var(--f-ui); font-size:13px; font-weight:600; color:var(--blue); } .linkbtn:hover { text-decoration:underline; } /* Carries .page-head too, so the title/sub spacing is Creator Hub's, not a second variant. */ .lab-firstrun-head { margin-bottom:24px; } .starter-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; } .starter-grid-3 { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } .starter-card { position:relative; display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:22px; border-radius:20px; border:1px solid rgba(43,140,255,0.22); background:var(--grad-panel); box-shadow:0 12px 40px rgba(0,0,0,0.35); } .starter-card > button { margin-top:auto; } /* A template's cover art, full-bleed across the top of its card. Square and un-cropped on purpose: this is the exact picture the new game is created with, so the picker shows the whole of it. */ .starter-shot { align-self:stretch; width:calc(100% + 44px); margin:-22px -22px 0; display:block; aspect-ratio:1/1; object-fit:cover; border-radius:20px 20px 0 0; background:rgba(43,140,255,0.06); image-rendering:pixelated; } .starter-shot[hidden] { display:none; } .starter-icon { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; background:rgba(43,140,255,0.1); border:1px solid rgba(43,140,255,0.25); } /* A template card carries its cover instead of an emoji, and only falls back to one if that cover fails to load — so the badge has to actually disappear when hidden (display:flex ignores [hidden]). */ .starter-icon[hidden] { display:none; } .starter-title { font-family:var(--f-display); font-weight:700; font-size:19px; margin:0 0 6px; } .starter-desc { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; } /* "Continue working on" — the Creator Hub's own cards, made clickable end to end. */ .lab-recent { margin-top:34px; } .lab-recent[hidden] { display:none; } .lab-recent .section-title { margin-bottom:14px; } .lab-recent-card { position:relative; display:block; width:100%; padding:0; text-align:left; overflow:hidden; font-family:var(--f-ui); transition:border-color .15s, transform .15s; } .lab-recent-card:hover { border-color:rgba(43,140,255,0.55); transform:translateY(-2px); } /* The card is a div now (the bin can't live inside a button), so the opening half is its own button filling the card — the whole thing stays clickable and keyboard-reachable as before. */ .lab-recent-open { display:block; width:100%; padding:0; margin:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; } .lab-recent-open:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; border-radius:inherit; } /* Sits over the cover, top right. Always there rather than hover-only: it has to be reachable on a touchscreen, where there is no hover to reveal it. */ .lab-recent-del { position:absolute; top:10px; right:10px; z-index:1; background:rgba(8,8,24,0.72); backdrop-filter:blur(6px); } .lab-recent-card .game-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; } /* ============================ studio primitives ============================ */ .iconbtn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border-radius:10px; background:transparent; border:1px solid rgba(43,140,255,0.22); color:var(--muted-2); font-family:var(--f-ui); font-size:15px; line-height:1; cursor:pointer; transition:border-color .15s, color .15s, background .15s; } .iconbtn:hover:not(:disabled) { color:var(--blue); border-color:rgba(43,140,255,0.6); background:rgba(43,140,255,0.08); } .iconbtn:disabled { opacity:.35; cursor:not-allowed; } .lab-toolbar-spacer { flex:1 1 auto; min-width:0; } .lab-toolbar-rule { flex:none; width:1px; height:22px; background:rgba(43,140,255,0.2); } .primary.sm { padding:8px 14px; border-radius:10px; font-size:13px; } .pill.is-running { color:var(--green); } .pill.is-running::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:wbpulsedot 1.4s ease-in-out infinite; } /* ==================== somebody else's game, and somebody in yours ==================== Deliberately not the editor's own blue: an adult looking at a child's work should be able to tell at a glance that this screen is not their own game, before reading a word of it. */ .lab-review { display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:none; padding:9px 14px; margin-bottom:10px; border-radius:14px; border:1px solid rgba(190,140,255,0.4); background:rgba(140,90,230,0.14); } .lab-review[hidden] { display:none; } .lab-review-back { display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer; font-size:13px; font-weight:600; color:#d9c4ff; } .lab-review-back:hover { text-decoration:underline; } .lab-review-who { margin:0; flex:1 1 220px; font-size:13.5px; color:#efe7ff; } .lab-review-who strong { color:#fff; } .lab-review-tag { font-size:12px; color:#c3aee8; } /* The child's side of the same lock. Amber, because nothing is broken — they just have to wait. */ .lab-locked { flex:none; padding:9px 14px; margin-bottom:10px; border-radius:14px; border:1px solid rgba(255,190,90,0.4); background:rgba(255,190,90,0.1); font-size:13.5px; line-height:1.5; color:#f0dcb8; } .lab-locked[hidden] { display:none; } .lab-locked strong { color:#ffe9c2; } /* ============================ toolbar ============================ One row: back · name + save status · game code chip · spacer · actions. Hierarchy is load-bearing: Run = green primary, Save = outline, everything else ghost. */ /* margin-bottom:24px, not the usual 12px — .lab-savestate (below) floats in this gap when it has something to say, and 12px was not tall enough to hold its own line without touching the canvas. Always 24px, never conditional on save state, is what keeps the canvas a constant height (see the note on .lab-savestate). */ .lab-toolbar { display:flex; align-items:center; gap:10px; flex:none; flex-wrap:nowrap; padding:14px; margin-bottom:24px; border-radius:16px; border:1px solid rgba(43,140,255,0.2); background:var(--grad-panel); box-shadow:0 10px 32px rgba(0,0,0,0.32); } /* Nowrap, so the toolbar never breaks into three ragged rows when the window narrows. Below the floor the whole editor scrolls sideways as one piece (see the small-screens section) — the toolbar goes with it rather than reflowing into something worse. The buttons hold their size so nothing gets crushed; only the spacer gives. */ .lab-toolbar > :not(.lab-toolbar-spacer) { flex:none; } .lab-back { font-size:17px; } /* .lab-identity's own box holds ONLY the name now — see .lab-savestate below for where the status line went and why. A single flow child sizes the box to exactly that child, so .lab-toolbar's align-items:center centers the name the same way it centers every other single-line control beside it — no compensating padding needed. */ .lab-identity { position:relative; display:flex; flex-direction:column; min-width:0; } .lab-name { width:auto; min-width:0; max-width:280px; padding:5px 9px; border-radius:9px; background:transparent; border:1px solid transparent; font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--fg); } .lab-name:hover { border-color:rgba(43,140,255,0.25); background:rgba(5,3,15,0.4); } .lab-name:focus { border-color:rgba(43,140,255,0.7); background:rgba(5,3,15,0.7); box-shadow:0 0 0 3px rgba(43,140,255,0.15); } /* Autosave is silent BY DESIGN, and there is now a Save button with its own "Saved ✓" reply — so this line has nothing left to say while everything is fine, and saying it anyway ("All changes saved", every time, forever) was exactly the passive chrome the redesign was trying to remove. It still exists for the states that ARE worth interrupting for: mid-edit ("Unsaved changes", "Saving…" — a "something is happening" signal — see is-dirty/is-saving below) and every failure, where it is also the retry affordance, which is why its text is a real button underneath. position:absolute, floating below the name rather than reserving flow space for it — the row used to reserve this line's height at all times so that hiding its CONTENT (visibility:hidden, not display:none) never shrank the toolbar, because a shrink here once left the trashcan stranded below the workspace's new, smaller bottom edge (Blockly computes its position once, early, against whatever canvas height there was THEN — see e2e/regressions.spec.js "the trashcan must stay inside the visible canvas", which caught exactly this). Taking the line out of flow entirely is the more robust fix for the same problem: the toolbar's height, and so the canvas below it, is now constant REGARDLESS of this line's content, because nothing about this line can ever push on layout at all. When it does have something to say it prints into the toolbar's own bottom margin, which is why that margin (.lab-toolbar's margin-bottom) is taller than this line — a few px of visible overlap into that gap costs far less than the tall reserve this replaced. */ .lab-savestate { position:absolute; top:100%; left:0; z-index:2; display:flex; align-items:center; gap:7px; margin-top:2px; padding-left:9px; font-size:12px; color:var(--muted); white-space:nowrap; } .lab-savestate.is-saved { visibility:hidden; } .lab-savestate .txt { appearance:none; background:none; border:none; padding:0; font:inherit; color:inherit; text-align:left; cursor:default; } .lab-savestate.is-failed .txt, .lab-savestate.is-signedout .txt { cursor:pointer; text-decoration:underline; } .lab-savestate .dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 7px rgba(70,224,138,0.7); } .lab-savestate.is-dirty .dot { background:var(--muted); box-shadow:none; } .lab-savestate.is-saving .dot { background:var(--blue); box-shadow:0 0 7px rgba(43,140,255,0.7); animation:wbpulsedot 1s ease-in-out infinite; } /* `is-failed`/`is-signedout` are what renderSaveState actually emits — an earlier draft styled `is-error`, which nothing sets, so a failed save wore the same green dot as a healthy one. */ .lab-savestate.is-failed, .lab-savestate.is-signedout { color:var(--red); } .lab-savestate.is-failed .dot, .lab-savestate.is-signedout .dot { background:var(--red); box-shadow:0 0 7px rgba(255,93,108,0.7); } /* Waiting on a teacher's lock is not a fault — amber, and no underline, because there is nothing to tap. It saves itself the moment they close it. */ .lab-savestate.is-waiting { color:#f0c88a; } .lab-savestate.is-waiting .dot { background:#f0c88a; box-shadow:0 0 7px rgba(240,200,138,0.6); } /* toast(text) in lab.js builds one of these and appends it to #tab-lab — with no rule anywhere in this file, before Phase 0. It never actually was visible: no position, no z-index, no background, so it sat wherever normal document flow put an unstyled div and was indistinguishable from nothing. Still used for the small confirmations Save/Keep don't already answer for themselves (e.g. deleting or renaming a kept save) — the Saved ✓ popover further down is Save's own reply. position:fixed is safe here, not scoped to the pane: #tab-lab itself carries [hidden] the moment the Lab tab is not the active one, and a display:none ancestor stops every descendant rendering regardless of its own position — so this can never show outside the Lab tab in practice. */ .lab-toast { position:fixed; left:50%; bottom:32px; z-index:200; transform:translateX(-50%); background:var(--grad-panel); border:1px solid var(--line-strong); color:var(--fg); font-size:13.5px; font-weight:600; padding:10px 20px; border-radius:999px; box-shadow:0 10px 28px rgba(0,0,0,0.4); pointer-events:none; animation:lab-toast-in .18s ease-out; } .lab-toast[hidden] { display:none; } @keyframes lab-toast-in { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } @media (prefers-reduced-motion:reduce) { .lab-toast { animation:none; } } /* Run — the one green button on the page. Green analogue of account.css's .primary recipe. */ /* ONE rule for both places a child can press Play: the toolbar button, and the pill that appears over the game preview on hover. They are the same action, so they are the same button — and they were not: the overlay was a blue fully-round pill against the bar's green 12px one, which read as a different control doing a different thing. Sharing the selector is what stops them drifting again; two copies of a gradient eventually disagree, and nothing fails when they do. */ .lab-run, .lab-gameview-hit-pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:12px; border:1px solid rgba(70,224,138,0.6); background:linear-gradient(135deg,#5ceb9c,#1fb968); color:#04210f; font-family:var(--f-ui); font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 6px 18px rgba(31,185,104,0.35), inset 0 1px 0 rgba(255,255,255,0.28); transition:filter .15s, transform .05s; } .lab-run:hover:not(:disabled) { filter:brightness(1.07); } .lab-run:active:not(:disabled) { transform:translateY(1px); } .lab-run:disabled { background:rgba(138,147,173,0.12); border-color:transparent; color:#5a627a; box-shadow:none; cursor:not-allowed; filter:none; } /* The Save/Your-saves pill — one grouped control replacing what used to be two separate ghost buttons. Both halves share a pill outline; the divider between them is the only border in the middle. Save is deliberately quieter than Run but louder than the ghosts either side of it — the outline/secondary treatment the old checkpoint button had. */ .lab-savegroup { display:inline-flex; align-items:stretch; height:38px; border-radius:12px; overflow:hidden; border:1px solid rgba(43,140,255,0.22); } /* Matches .ghostbtn's own quiet default (muted text, brightening to blue only on hover) — Save, Ask mebo and Details sit in the same row and read as one family of equal-weight actions, not three different colour schemes competing for the eye. */ .lab-save, .lab-saves { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; background:transparent; border:none; color:var(--muted-2); font-family:var(--f-ui); font-weight:600; font-size:14px; cursor:pointer; line-height:1; transition:color .15s; } .lab-save:hover, .lab-saves:hover { background:rgba(43,140,255,0.1); color:var(--blue); } /* The divider between the two halves — a single 1px border shared by both buttons would double up under the pill's own outer border, so it lives on the left button only. */ .lab-save { border-right:1px solid rgba(43,140,255,0.22); } /* A label that is not a WORD, so it can never be misread as the verb ("Save 3"?) — visible on touch, where hover never reveals a title. ≥44px wide even with no count showing: the clock icon alone is still a real target, not a sliver next to Save. */ .lab-saves { min-width:44px; } .lab-saves-count { font-size:12px; font-weight:700; color:var(--blue); background:rgba(43,140,255,0.16); border-radius:999px; padding:1px 7px; min-width:18px; text-align:center; } .lab-saves-count[hidden] { display:none; } /* The Saved ✓ popover (Save's own reply) and the Keep popover share this shell — same idea as the mebo callout below: fixed, placed under its anchor button in JS (placeUnder in lab.js), because the toolbar clips overflow. Neither is modal: Escape or a click outside just closes it. */ .lab-savedpop, .lab-keeppop { position:fixed; z-index:60; padding:14px 16px; border-radius:14px; border:1px solid rgba(43,140,255,0.45); background:var(--panel, #131a2b); box-shadow:0 16px 44px rgba(0,0,0,0.5); animation:mb-note-in 0.18s ease-out; } .lab-savedpop[hidden], .lab-keeppop[hidden] { display:none; } @media (prefers-reduced-motion: reduce) { .lab-savedpop, .lab-keeppop { animation:none; } } /* No fixed width, unlike .lab-keeppop below — it sizes to its own short content, "Saved ✓" or "⚑ Keep this one" in a single line. A guessed fixed width (260px) clipped the Keep button by a couple of px on real fonts; placeUnder (lab.js) now measures the rendered width instead of assuming one. */ .lab-savedpop { display:flex; align-items:center; gap:12px; white-space:nowrap; } .lab-savedpop-txt { font-size:15px; font-weight:800; color:var(--green); } .lab-keeppop { width:320px; } .lab-keeppop-title { margin:0 0 10px; font-size:15px; font-weight:800; color:var(--fg); } .lab-keeppop input[type="text"] { width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(43,140,255,0.3); background:rgba(5,3,15,0.4); color:var(--fg); font-family:var(--f-ui); font-size:16px; } .lab-keeppop input[type="text"]:focus { border-color:rgba(43,140,255,0.7); box-shadow:0 0 0 3px rgba(43,140,255,0.15); } .lab-keeppop-err { margin:8px 0 0; font-size:12.5px; color:var(--red); } .lab-keeppop-err[hidden] { display:none; } .lab-keeppop-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } /* "⚑ Keep a save of now", at the head of the drawer — a real button, not a link, since it starts the same deliberate act the popover elsewhere on screen does. */ .lab-keepnow { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:10px 0 6px; padding:10px 14px; border-radius:10px; border:1px dashed rgba(43,140,255,0.4); background:rgba(43,140,255,0.06); color:var(--blue); font-family:var(--f-ui); font-weight:700; font-size:13.5px; cursor:pointer; } .lab-keepnow:hover { background:rgba(43,140,255,0.14); border-style:solid; } /* ============================ view tabs (narrow screens only) ============================ */ .lab-viewtabs { display:none; gap:8px; flex:none; padding:5px; margin-bottom:10px; border-radius:13px; background:rgba(12,18,48,0.5); border:1px solid rgba(43,140,255,0.16); } .lab-viewtab { flex:1; padding:10px 14px; border-radius:9px; background:transparent; border:none; color:var(--muted); font-family:var(--f-ui); font-size:13.5px; font-weight:600; cursor:pointer; } .lab-viewtab:hover { color:var(--fg); } .lab-viewtab.is-active { background:rgba(7,104,255,0.18); color:var(--blue); } /* ============================ editor body / panes / divider ============================ */ .lab-editor { display:flex; flex-direction:column; flex:1; min-height:0; } .lab-editor[hidden] { display:none; } .lab-body { display:flex; flex:1; min-height:0; min-width:0; } .lab-pane { display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; border-radius:18px; border:1px solid rgba(43,140,255,0.2); background:var(--grad-panel); box-shadow:0 12px 40px rgba(0,0,0,0.35); } /* An author `display` always beats the UA's [hidden] rule, so a class that sets one must restate it — without this, hiding the blocks pane at level 2 would do nothing at all. (Same trap as .field[hidden] in account.css, which once exposed the admin-only game-code field to everyone.) */ .lab-pane[hidden] { display:none; } /* Toolbar buttons share one height — a FIXED one, not a minimum. A colour emoji carries a taller line box than the text beside it, so a min-height still let one button grow past its neighbours; the clock is an SVG now, and the fixed height means no future glyph can do it again. */ .lab-toolbar .ghostbtn, .lab-toolbar .lab-run { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding-top:0; padding-bottom:0; line-height:1; } /* Nothing in this file styled a disabled toolbar ghost button — the same invisible-state trap as the unstyled toasts (see docs/builder-lab-saving-plan.md Phase 0). Setting .disabled on the checkpoint button while previewing did nothing a child could see without this. */ .lab-toolbar .ghostbtn:disabled { opacity:.4; cursor:not-allowed; } .btnicon { flex:none; } /* ---- the toolbar sheds its labels before it sheds the panel ---- The row is nowrap and every button is fixed-size, so its width is simply the sum of what is in it — and that sum outgrew the panel. At its longest it wanted about 1390px inside a panel whose floor is 1040, so on any ordinary laptop the buttons ran out past the rounded border. That was true before the Build Challenge button and it only became visible with it. Widening the floor would have been the wrong fix: it would put a horizontal scrollbar under a window that is perfectly big enough to work in. Instead the least important LABELS go, one band at a time, leaving the icon — each button keeps a title and an aria-label, so hiding the text costs a screen reader nothing and a mouse one hover. Run keeps its words at every width; it is the primary action and reading "▶" alone is a guess. Save keeps its word at every width too, now — the same exemption Run has. On a 1366px Chromebook, the hardware most of this audience uses, this band used to be the FIRST to drop, which meant nothing on the screen said "Save" on exactly the machines most children are on. #lab-history-open has no .lbl of its own any more (it is the clock half of the pill, a count rather than a word), so it is not in this list to begin with. */ .lab-toolbar .lbl { display:inline; } @media (max-width:1400px) { /* First to go: rarely pressed, and its icon is unambiguous. */ #lab-details-open .lbl { display:none; } } @media (max-width:1160px) { /* Then the competition button — the trophy carries it, and it is not an everyday action. */ #lab-enter-open .lbl { display:none; } } @media (max-width:1060px) { /* Last: mebo's name. His face is the most recognisable thing in the row, so this is the label that survives longest and still loses nothing when it goes. */ #lab-help-open .lbl { display:none; } } /* ============================ small screens ============================ Builder Lab has a FIXED minimum width rather than a fluid collapse. Two panes, a toolbar and a code surface have a size below which they stop being usable, and reflowing them into something narrower produces a worse answer than simply keeping the layout and letting the page scroll to it. 1040px is the floor: it is the width the PANES need, and they are comfortable there. **iPad landscape does NOT clear it, and this comment used to say it did.** iPad landscape is 1024 CSS px against a floor of 1040 — the claim was 16px wrong from the day it was written, and being wrong about the main target device is exactly what stopped anybody checking. It got worse afterwards rather than better: the Save/Keep control took the toolbar's own content from 1076px to 1111, so ▶ Play sat at a right edge of 1050 in LANDSCAPE and 990 in portrait, and Save at 837 in portrait — both of the two controls the editor cannot be used without, off the screen, on the hardware this is for. Confirmed on a real iPad. The floor stays, because the trade behind it is still right: a two-pane editor reflowed into 768px is worse than one you scroll. What changes is that the TOOLBAR stops being governed by it (see the sticky rule below) — the panes scroll sideways, the controls do not go with them. The scroll lives on the workspace, so the app bar and section tabs stay put and only the editor moves. The floor applies ONLY while the editor is open — the first-run and template screens are ordinary pages that stay responsive down to a phone, so scoping this to a visible #lab-editor keeps them out of it. */ .workspace:has(#tab-lab:not([hidden]) #lab-editor:not([hidden])) { overflow-x:auto; } .tab-panel.studio:not([hidden]):has(#lab-editor:not([hidden])) { min-width:1040px; } /* Below the floor, the toolbar is the thing that fits. * * `position:sticky; left:0` inside the workspace's own horizontal scrollport pins it to the LEFT * EDGE OF WHAT YOU CAN SEE, so scrolling the panes sideways no longer takes the controls with them; * and a width measured from the viewport rather than from the 1040px panel gives it a real width to * wrap into, which `flex-wrap:wrap` then uses. The spacer takes the rest of the first line, so the * break lands where it was always going to: identity above, actions below. That reads as a layout * somebody meant, which two orphans hanging off a gap does not. * * Deliberately NOT the alternative fixes: lowering the floor to 1024 no longer helps (the toolbar * wants 1111), and shedding the Save label at another band would re-create the exact fault * lab.css:382 describes — nothing on the screen saying "Save" on the hardware most of this audience * uses. Nothing here is a label; every word survives. * * 36px is .workspace's own 18px gutters while the editor is open (see the top of this file). The * toolbar's height changing between one row and two is safe: it is constant for a given viewport, * which is what .lab-savestate's note actually requires, and Blockly re-measures on resize. */ @media (max-width:1040px) { .lab-toolbar { position:sticky; left:0; z-index:3; width:calc(100vw - 36px); flex-wrap:wrap; row-gap:10px; } /* A wrapping toolbar can wrap far enough to leave the panes NOTHING. Measured at a 400px-wide viewport: the controls take 207px of a 291px editor and the blocks canvas computes to a height of exactly 0 — a child gets a toolbar and no editor underneath it, and because the page is pinned at height:100dvh/overflow:hidden while the editor is open, there is nowhere to scroll to go and find it. `min-height:0` on .lab-body is what permits the collapse; it is the right default when the space exists, so the FLOOR goes here rather than there. Real iPads never reach this: the body measures 605px in portrait and 349px in landscape, both clear of the floor, so this rule changes nothing about the device it was written for. It is the narrow end — a phone, a split-screen pane, a very small window — that had no editor at all. */ .lab-body { min-height:280px; } /* And the floor is only worth having if it can be reached. .workspace is already the sideways scroller for the whole editor; this lets it scroll the other way too, on the same condition. */ .workspace:has(#tab-lab:not([hidden]) #lab-editor:not([hidden])) { overflow-y:auto; } } /* And the PAGE must not scroll vertically while the editor is open. Every box from body down is already `flex:1; min-height:0`, which is right — but body carried `min-height:100vh`, an "at least", so the panes' own minimum content pushed the document 115px past the window and the whole editor slid under the fold. Selecting a block near the bottom of the workspace then highlighted its lines in a part of Monaco that was off-screen: the feature worked and you could not see it work. `height` rather than `min-height` gives the flex chain a definite size to divide, so the panes shrink and scroll INSIDE themselves — which is what a two-pane editor is supposed to do, and what makes "click a block, see its code" true at any window size. Scoped to the open editor, so every ordinary page on the site keeps scrolling normally. The horizontal scroll above is unaffected. */ /* dvh, not vh — and this is the rule where it matters most. On iOS Safari `100vh` is the LARGE viewport: the height the page would have if the browser chrome were hidden, which is 60-90px taller than what you can actually see. Everywhere else on the site that only makes a page very slightly scrollable. HERE it is a definite height that is too tall with `overflow:hidden` on top of it, so the excess is UNREACHABLE — the bottom of the editor is cut off and nothing can scroll to it. `dvh` tracks the chrome as it shows and hides, which is right for a persistent layout; `svh` is the conservative swap if the tracking ever reads as jumpy. The plain vh line stays first as the fallback for anything that has not heard of dvh. public/index.html already knew this — it uses 100svh, with a comment. The app never got it. */ body.app:has(#tab-lab:not([hidden]) #lab-editor:not([hidden])) { height:100vh; height:100dvh; overflow:hidden; } /* ---- new file / new folder ---- */ .lab-kinds { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:14px; } .lab-kind { display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer; padding:10px 12px; border-radius:11px; text-align:left; background:rgba(5,3,15,0.4); border:1px solid var(--line-soft); color:var(--muted); transition:border-color .12s ease, background .12s ease; } .lab-kind:hover { border-color:var(--line); background:rgba(43,140,255,0.07); } .lab-kind.is-active { border-color:rgba(43,140,255,0.5); background:rgba(43,140,255,0.11); color:var(--fg); } .lab-kind-icon { display:flex; margin-bottom:2px; color:var(--muted-2); } .lab-kind.is-active .lab-kind-icon { color:var(--blue); } .lab-kind-name { font-size:13.5px; font-weight:600; color:var(--fg); } .lab-kind-what { font-size:11.5px; line-height:1.35; color:var(--muted); } /* The extension lives in the field, so the whole filename is visible as you type it. */ .lab-nameinput { display:flex; align-items:stretch; } .lab-nameinput input { border-top-right-radius:0; border-bottom-right-radius:0; } .lab-nameext { display:flex; align-items:center; flex:none; padding:0 12px; border-radius:0 11px 11px 0; border:1px solid rgba(43,140,255,0.3); border-left:none; background:rgba(43,140,255,0.09); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; color:var(--blue); } .lab-nameext[hidden] { display:none; } /* Download sits with the files rather than in the toolbar — it acts on them, and it is a rare thing to want next to Run, which is not. */ .lab-files-foot { flex:none; border-top:1px solid rgba(43,140,255,0.14); } .lab-files-foot .lab-filetree-note { border-top:none; } .lab-downloadlink { display:block; width:100%; padding:9px 12px; cursor:pointer; text-align:left; background:none; border:none; border-top:1px solid rgba(43,140,255,0.1); font-family:var(--f-ui); font-size:12px; color:var(--muted); transition:color .12s ease, background .12s ease; } .lab-downloadlink:hover { color:var(--blue); background:rgba(43,140,255,0.07); } /* ---- level 2: open tabs, and the preview surface ---- */ /* flex-direction is load-bearing: the base tab stacks a name over its caption for level 1, and without resetting it here the close button sat UNDER the filename instead of beside it. */ .lab-editor.is-code .lab-file { display:inline-flex; flex-direction:row; align-items:center; gap:7px; cursor:pointer; } .lab-file-x { appearance:none; border:none; background:none; cursor:pointer; padding:0 2px; line-height:1; font-size:11px; color:var(--muted); border-radius:4px; opacity:0; transition:opacity .12s, color .12s; } .lab-file:hover .lab-file-x, .lab-file.is-active .lab-file-x { opacity:.7; } .lab-file-x:hover { opacity:1; color:var(--red); background:rgba(239,68,68,0.12); } /* A picture or a sound opens as itself. Showing a PNG as bytes would be a worse answer than showing the PNG. */ .lab-preview { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:rgba(5,3,15,0.8); } .lab-preview[hidden] { display:none; } .lab-preview-stage { display:flex; align-items:center; justify-content:center; max-width:100%; max-height:70%; padding:18px; border-radius:14px; border:1px solid rgba(43,140,255,0.18); background:repeating-conic-gradient(rgba(255,255,255,0.045) 0% 25%, transparent 0% 50%) 50% / 18px 18px; } /* Pixel art must not be smoothed — a 16x16 sprite blown up should look like a 16x16 sprite. */ .lab-preview-stage img { max-width:min(420px, 60vw); max-height:46vh; image-rendering:pixelated; } .lab-preview-meta { margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:var(--muted); } .lab-preview-none { margin:0; font-size:13px; color:var(--muted); } /* ---- level 2: the file tree ---- */ /* A starting width, not a fixed one — the divider overrides flex-grow to resize it. Using a flex-basis here (rather than 0 0 210px) is what lets that work. */ .lab-pane-files { flex:0.19 1 0; min-width:150px; } .lab-filetree { display:flex; flex-direction:column; gap:2px; padding:10px; overflow-y:auto; flex:1; } .lab-filetree-group { margin:10px 0 4px; padding:0 6px; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); } .lab-filetree-item { display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; border-radius:8px; border:1px solid transparent; background:none; cursor:pointer; text-align:left; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; color:var(--muted); transition:background .12s ease, color .12s ease; } .lab-filetree-item:hover { background:rgba(43,140,255,0.08); color:var(--fg); } .lab-filetree-item.is-active { background:rgba(43,140,255,0.14); border-color:rgba(43,140,255,0.3); color:var(--fg); } /* Shipped with every game and not the creator's to edit — listed so they know it is there, but it does not pretend to be openable. */ .lab-filetree-item.is-provided { cursor:default; opacity:.55; } .lab-filetree-item.is-provided:hover { background:none; color:var(--muted); } /* Line glyphs, not emoji: they take the row's own colour, so an icon dims with a provided file and lifts with a selected one instead of shouting in full colour on every row. */ .lab-fileicon { flex:none; opacity:.75; } .lab-filetree-item.is-active .lab-fileicon { opacity:1; color:var(--blue); } .lab-filetree-folder .lab-fileicon { opacity:.6; } /* Folders are folders: nested, indented by depth, and each one a place things can be dropped. */ .lab-filetree-folder { display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:8px; width:100%; border:1px dashed transparent; background:none; cursor:pointer; text-align:left; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; color:var(--muted-2); } .lab-filetree-folder:hover { color:var(--fg); } /* A real chevron rather than a ▾ glyph: at the size this needs to be, a text arrow rendered as a couple of grey pixels and was easy to miss entirely. */ .lab-filetree-twist { flex:none; color:var(--muted-2); transition:transform .12s ease; } .lab-filetree-folder:hover .lab-filetree-twist { color:var(--blue); } .lab-filetree-folder.is-shut .lab-filetree-twist { transform:rotate(-90deg); } @media (prefers-reduced-motion:reduce) { .lab-filetree-twist { transition:none; } } .lab-filetree-folder, .lab-filetree-item { padding-left:calc(9px + var(--depth, 0) * 13px); } .lab-filetree-folder.is-dropping { border-color:rgba(70,224,138,0.6); background:rgba(70,224,138,0.1); color:#7ee08a; } /* One + per folder, so where a new thing lands is answered by which one you press. Revealed on hover so the tree stays quiet when you are only reading it. */ .lab-filetree-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .lab-filetree-plus { flex:none; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:auto; border-radius:5px; cursor:pointer; font-size:13px; line-height:1; color:var(--muted); opacity:0; transition:opacity .12s, color .12s; } .lab-filetree-folder:hover .lab-filetree-plus, .lab-filetree-group:hover .lab-filetree-plus, .lab-filetree-plus:focus-visible { opacity:1; } .lab-filetree-plus:hover { color:var(--blue); background:rgba(43,140,255,0.14); } /* :focus-visible is not a touch state, so on a tablet this was invisible — and in code mode the only other way to add a file is the file tree's drag-and-drop, which is the unreliable one from the Files app. The discoverable route cannot be the hidden one. */ @media (hover: none) { .lab-filetree-plus { opacity:1; } } .lab-filetree-group { display:flex; align-items:center; } .lab-newfile-kinds { margin-bottom:12px; } .lab-filetree-drophint { margin:6px 0 0; padding:0 9px; font-size:11px; line-height:1.4; color:var(--muted); opacity:.8; } .lab-filetree-note { flex:none; margin:0; padding:10px 12px; font-size:11.5px; line-height:1.45; color:var(--muted); border-top:1px solid rgba(43,140,255,0.14); } .lab-pane-blocks { flex:1.15 1 0; } .lab-pane-code { flex:1 1 0; } .lab-graduation[hidden] { display:none; } .lab-pane-head { display:flex; align-items:center; gap:10px; flex:none; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid rgba(43,140,255,0.14); } .lab-pane-title { font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--fg); } .lab-pane-hint { font-size:12px; color:var(--muted); } .lab-pane-tools { display:flex; align-items:center; gap:6px; margin-left:auto; } .lab-pane-tools[hidden] { display:none; } .lab-modeswitch { flex:none; gap:6px; } .lab-modeswitch .seg-btn { flex:none; padding:8px 13px; font-size:13px; border-radius:10px; } .lab-gradswitch { flex:none; gap:6px; } .lab-gradswitch .seg-btn { flex:none; padding:6px 11px; font-size:12px; border-radius:9px; cursor:default; } .seg-btn.is-locked { color:#5a627a; border-color:rgba(138,147,173,0.25); background:rgba(138,147,173,0.06); } /* draggable divider: 6px of visible rail, a wider invisible hit area, a visible grip */ .lab-divider { position:relative; flex:none; width:6px; margin:0 5px; cursor:col-resize; display:flex; align-items:center; justify-content:center; border-radius:999px; background:transparent; transition:background .15s; /* Without this it computes to `auto`, which means the browser gets to decide a finger dragging here is a scroll — fire pointercancel, stop sending pointermove, and the pane never resizes. preventDefault in the handler cannot take that back, because the decision is made before any handler runs. This is the one fix in the iPad pass that emulation cannot verify: a synthetic pointer event bypasses gesture arbitration entirely, so the drag "worked" either way. */ touch-action:none; } /* The visible line is 6px; this widens what a finger has to hit. 22px on a mouse, 44 on touch — Apple's own floor, and this is a precision drag with nothing else nearby to compete for the press, so the wider grab costs nothing. */ .lab-divider::before { content:""; position:absolute; top:0; bottom:0; left:-8px; right:-8px; } @media (hover: none) { .lab-divider::before { left:-19px; right:-19px; } } /* `lab-resizing` is added to for the length of a drag (lab.js) and had NO RULE ANYWHERE, so it read as if it did something and did nothing. The usual intent, and genuinely useful for a touch drag: keep the resize cursor while the pointer wanders off the 6px line, and stop the drag selecting the text in either pane as it crosses them. */ body.lab-resizing { cursor:col-resize; -webkit-user-select:none; user-select:none; } .lab-divider span { width:4px; height:52px; border-radius:999px; background:rgba(43,140,255,0.3); transition:background .15s, height .15s; } .lab-divider:hover span, .lab-divider.is-dragging span { background:var(--blue); height:76px; } .lab-divider.is-dragging { background:rgba(43,140,255,0.08); } /* ============================ blocks pane ============================ */ .lab-workspace { flex:1; min-height:0; width:100%; position:relative; background: radial-gradient(circle at center, rgba(43,140,255,0.14) 1px, transparent 1.2px) 0 0/22px 22px, linear-gradient(180deg, rgba(5,3,15,0.55), rgba(5,3,15,0.8)); } .lab-workspace[hidden] { display:none; } .lab-workspace.is-readonly { opacity:.55; filter:grayscale(.35); } /* previewVersion/endPreview/doRestore (lab.js) toggle .is-previewing on #lab-editor — this is the half of that state nothing styled: the class existed, set ws.options.readOnly, and otherwise did nothing a child could see or feel. .lab-workspace holds Blockly's toolbox and flyout as well as the canvas, so pointer-events:none here silences the palette too, not just dragging a block. */ #lab-editor.is-previewing .lab-workspace { opacity:.55; filter:grayscale(.35); pointer-events:none; } .lab-workspace-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none; color:var(--muted); font-size:14px; text-align:center; padding:20px; } /* Toolbox category swatches. The Blockly workspace itself is themed in JS — these are the swatch colours (design doc §7) exposed both as tokens and as a ready-made dot class. */ .lab-pane-blocks { --cat-game:#b794ff; --cat-sprites:#78b4ff; --cat-input:#4fd6c4; --cat-collisions:#fb8ba0; --cat-world:#7ee08a; --cat-sound:#f79bd6; --cat-logic:#fbbf24; --cat-loops:#fb923c; --cat-variables:#818cf8; --cat-numbers:#38bdf8; } .lab-cat-swatch { display:inline-block; flex:none; width:12px; height:12px; border-radius:4px; background:var(--cat, var(--blue)); box-shadow:0 0 8px color-mix(in srgb, var(--cat, var(--blue)) 60%, transparent); } .lab-cat-swatch[data-cat="game"] { --cat:var(--cat-game); } .lab-cat-swatch[data-cat="sprites"] { --cat:var(--cat-sprites); } .lab-cat-swatch[data-cat="input"] { --cat:var(--cat-input); } .lab-cat-swatch[data-cat="collisions"] { --cat:var(--cat-collisions); } .lab-cat-swatch[data-cat="world"] { --cat:var(--cat-world); } .lab-cat-swatch[data-cat="sound"] { --cat:var(--cat-sound); } .lab-cat-swatch[data-cat="logic"] { --cat:var(--cat-logic); } .lab-cat-swatch[data-cat="loops"] { --cat:var(--cat-loops); } .lab-cat-swatch[data-cat="variables"] { --cat:var(--cat-variables); } .lab-cat-swatch[data-cat="numbers"] { --cat:var(--cat-numbers); } /* an invalid block: red ring + pulse (class applied to the block's SVG group by studio.js) */ @keyframes lab-invalid-pulse { 0%,100% { filter:drop-shadow(0 0 0 rgba(255,93,108,0.55)); } 50% { filter:drop-shadow(0 0 9px rgba(255,93,108,0.95)); } } .lab-invalid-block { animation:lab-invalid-pulse 1.3s ease-in-out infinite; } .lab-invalid-block .blocklyPath { stroke:var(--red); stroke-width:3px; } /* ============================ assets manager ============================ */ .lab-assets { flex:1; min-height:0; overflow-y:auto; padding:18px; } .lab-assets[hidden] { display:none; } .lab-assets-title { font-family:var(--f-display); font-weight:600; font-size:16px; margin:0 0 6px; } .lab-assets-help { font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 22px; max-width:560px; } .lab-assets-help strong { color:var(--fg); font-weight:600; } /* One TAB PANEL per kind — the three used to be stacked sections separated by a rule, and that rule had to go with them: a hidden sibling still counts for `+`, so the visible panel inherited a divider above it with nothing on the other side. Only one is ever displayed. */ .asset-section[hidden] { display:none; } /* The tab row. `.seg` gives it the pill styling every other segmented control in the Lab uses; all this adds is room for the count and a full-width stretch, because three words in a row that stops halfway across reads as a stray toolbar rather than the navigation for the pane below it. */ .lab-assets-tabs { display:flex; width:100%; margin:0 0 20px; } .lab-assets-tabs .seg-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; } /* The count is the point of the tabs: "Sounds 0" is the most useful thing this pane can say, and it is exactly what the old stacked layout buried under a sprite list that grows without limit. So it never hides at zero — it goes quiet instead. */ .asset-tab-count { min-width:19px; padding:1px 5px; border-radius:9px; font-size:11px; font-weight:700; background:rgba(43,140,255,0.16); color:var(--muted); } .lab-assets-tabs .seg-btn.is-active .asset-tab-count { background:rgba(255,255,255,0.22); color:inherit; } .asset-section-note { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 14px; max-width:560px; } .asset-section-note strong { color:var(--fg); font-weight:600; } /* Which files will be accepted — said before the picker opens, not after it's rejected. */ .asset-types { color:var(--muted-2); font-weight:600; } /* A sound or a picture: one file, one name, one row. */ .asset-row { display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; border-radius:13px; border:1px solid rgba(43,140,255,0.2); background:rgba(7,104,255,0.05); } .asset-row-icon { flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; background:rgba(43,140,255,0.1); border:1px solid rgba(43,140,255,0.25); } .asset-row-thumb { flex:none; width:38px; height:38px; border-radius:11px; overflow:hidden; background:rgba(43,140,255,0.06); border:1px solid rgba(43,140,255,0.25); } .asset-row-thumb img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; } .asset-row-id { display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; } .asset-row-name { font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--fg); } .asset-row-file { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* What kinds of file this dialog will take, sitting just above the picker button. */ .lab-asset-types { font-size:12px; color:var(--muted-2); font-weight:600; margin:0 0 4px; } .sprite-card { border-radius:16px; border:1px solid rgba(43,140,255,0.2); background:rgba(7,104,255,0.05); padding:14px 16px; margin-bottom:14px; } .sprite-card-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; } .sprite-name { width:auto; max-width:220px; padding:5px 9px; border-radius:9px; background:transparent; border:1px solid transparent; font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--fg); } .sprite-name:hover { border-color:rgba(43,140,255,0.25); } .sprite-count { font-size:12px; color:var(--muted); } .sprite-card-actions { display:flex; align-items:center; gap:6px; margin-left:auto; } .sprite-states { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; } .sprite-state, .sprite-state-add { flex:none; width:96px; border-radius:13px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px; text-align:center; } .sprite-state { position:relative; border:1px solid rgba(43,140,255,0.22); background:rgba(5,3,15,0.6); } /* The thumbnail IS the swap button — clicking a picture to change it is the guess a child makes first, so it should be the thing that works. A real