/* =================================================================== Persistent editing workspaces Both editors reserve the viewport for the artwork and let tool rails scroll. =================================================================== */ .editor-workspace-shell { min-width: 0; min-height: 0; } body.mode-freestyle { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 100dvh; /* No overflow property at all: an `overflow-y` here makes the scroll container, which quietly breaks window.scrollTo, scroll restoration and the mobile address bar. The document scrolls, as everywhere else in the app. */ } body.mode-freestyle main { min-height: 0; height: auto; } .pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 8px; } .pane-eyebrow { color: var(--ink); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .pane-status { color: var(--ink-soft); font-size: 12px; font-weight: 600; } .field { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: clip; } /* The caption row is a script line: the zone's role, then the words. It no longer opens or closes — only Style & position does. */ .field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px 4px; font-size: 14px; font-weight: 800; list-style-position: inside; } .field-head .hint { margin-left: auto; color: var(--ink-soft); font-size: var(--t-micro); font-weight: 600; text-align: right; white-space: nowrap; flex: none; } .field-name { font-weight: 700; color: var(--ink); min-width: 0; cursor: pointer; } /* The active caption is the one the canvas is marking — keep the link obvious. */ .field.is-active .field-name { color: var(--accent); } .field.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .field.is-active .field-head { background: transparent; } .field-body { padding: 0 12px 12px; } .field-body > input[type="text"] { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 16px/1.35 var(--font-body); } .field-body > input[type="text"]:focus-visible { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 1px; } @media (min-width: 821px) { body.mode-create main { max-width: 1320px; } body.mode-freestyle main { max-width: 1600px; padding-inline: 14px; } body.mode-freestyle .site-footer { display: none; } #view-create { padding-top: 18px; } #view-create .editor-header { margin-bottom: 10px; } #view-create .editor.editor-create { grid-template-columns: minmax(420px, 1.55fr) minmax(360px, 0.9fr); gap: 16px; height: max(520px, calc(100dvh - 150px)); max-height: 800px; max-width: none; align-items: stretch; } .editor-create .preview-pane { position: relative; top: auto; display: flex; min-height: 0; flex-direction: column; justify-content: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #f4f2ef; } .editor-create #preview { width: auto; max-width: 100%; max-height: calc(100% - 78px); margin: auto; object-fit: contain; } .editor-create .preview-hint { text-align: center; } .editor-create .text-summary { max-height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .editor-create .controls-pane { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 12px 10px 20px 2px; } .editor-create .row-controls { position: sticky; top: 0; z-index: 2; margin: 0 0 12px; padding: 4px 0 10px; background: var(--bg); } .examples-block { margin-top: 32px; } .fs-view { display: flex; height: auto; min-height: calc(100dvh - 70px); flex-direction: column; overflow: visible; padding-top: 8px; } .fs-header { flex: none; min-height: 34px; } .fs-toolbar { position: relative; top: auto; flex: none; margin: 6px 0 8px; flex-wrap: nowrap; gap: 8px; overflow: hidden; } .fs-toolbar-main { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fs-tool-group { flex: none; } .fs-tool-right { flex: 0 0 auto; margin-left: auto; } .fs-workspace { flex: 1 1 auto; min-height: 0; /* The left column holds the rail: a 72px spine plus the group panel. */ grid-template-columns: minmax(316px, 352px) minmax(420px, 1fr) minmax(236px, 272px); gap: 10px; padding-bottom: 24px; align-items: start; } .fs-side, .fs-stage { order: 0; } .fs-side { min-height: 0; /* The page scrolls now, so a rail taller than the screen is reachable by scrolling rather than trapped behind its own scrollbar. */ overflow: visible; padding-right: 2px; } .fs-stage { min-height: 520px; height: min(78dvh, 900px); position: sticky; top: 8px; } /* The rail is pinned like the artwork it serves, and sized to the same height, so the spine — including Layers and Keys at its foot — is on screen whatever the page scroll. */ .fs-rail { position: sticky; top: 8px; height: min(78dvh, 900px); min-height: 520px; } } @media (min-width: 821px) and (max-width: 1080px) { .fs-workspace { grid-template-columns: minmax(288px, 304px) minmax(340px, 1fr) minmax(220px, 248px); } .fs-drawer { padding: 8px; } .fs-toolbar .btn { padding-inline: 10px; } } /* Narrow tablets and phones use the same canvas-first interaction model. */ @media (max-width: 820px) { .btn-full { display: none; } .btn-short { display: inline; } body.mode-create .site-footer, body.mode-freestyle .site-footer { display: none; } /* Clearance for the pinned action bar, which now wraps to two rows. */ #view-create { padding-top: 8px; padding-bottom: 130px; } #view-create .editor-header { margin-bottom: 6px; } #view-create .editor-header h1 { font-size: var(--t-lead); } /* `display: contents` rather than `block` so the sticky preview below is bounded by #view-create, not by this wrapper. A sticky element stops at its containing block, and this wrapper ends where the tools end — so the meme unpinned and scrolled away exactly when someone scrolled down to keep working on it. The wrapper's only mobile contribution was max-width:720px, which never applies below 820px anyway. */ #view-create .editor-create { display: contents; } /* Not pinned. The pin was added when captions were typed on this page and the meme had to stay in sight while you worked. On a phone the inline caption editor is hidden — the page is now preview, Open in Canvas, explanation, examples — so a pinned picture held a third of the screen over text you are trying to read (owner, 2026-09-16). If inline captioning ever returns to the phone layout, the pin should come back with it, bounded to the editor rather than to the whole page. */ #view-create .preview-pane { position: static; margin: 0 0 10px; padding: 0; background: transparent; box-shadow: none; } #view-create .preview-pane .pane-heading { margin-bottom: 4px; min-height: 24px; } #view-create #preview { width: auto; max-width: 100%; max-height: 32dvh; margin: 0 auto; } #view-create .preview-hint { display: none; } #view-create .text-summary { max-height: 32px; margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--t-micro); line-height: 1.35; } #view-create .create-captions { margin-top: 12px; } #view-create .controls-pane > .pane-heading { margin-top: 10px; } #view-create .row-controls { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: row; gap: 6px; margin: 0; padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right)); border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.97); box-shadow: 0 -4px 18px rgba(28, 27, 26, 0.12); backdrop-filter: blur(8px); } #view-create .row-controls .btn { width: auto; min-height: 46px; padding-inline: 10px; min-width: 0; font-size: var(--t-control); } /* "Open in canvas" is spelled out rather than shortened to "Canvas", which did not say what the button does. Four labels no longer fit one 375px row, so the bar wraps: the two secondary actions share the top line and the two that matter get a full-width line each. With flex-basis 0 they were being squeezed to 60px and clipped mid-word. */ #view-create .row-controls { flex-wrap: wrap; } /* A 2×2 grid: secondary actions on the top line, the two that matter below. An equal 50% basis (minus half the 6px gap) is what keeps the pairs together instead of letting one button trail onto its own line. */ #view-create .row-controls #reset-btn, #view-create .row-controls #choose-another-template-btn, #view-create .row-controls #open-in-canvas-btn, #view-create .row-controls #download-btn { flex: 1 1 calc(50% - 3px); } #view-create .editor-header-actions { display: flex; flex-wrap: nowrap; gap: 8px; } #view-create .editor-header-actions .btn { flex: 1 1 0; min-width: 0; } #view-create .style-tools { grid-template-columns: 1fr 1fr; padding: 8px; } #view-create .zone-tools .tool-btn, #view-create .style-tools .tool-btn, .fs-view .fs-toggle, .fs-view .fs-icon, .fs-view .fs-layer-order .btn { min-width: 44px; min-height: 44px; } #view-create .style-tools input[type="color"], .fs-view .fs-color-pair input[type="color"] { width: 52px; height: 44px; } .fs-view .fs-check { min-height: 44px; } #view-create:has(.field-body > input:focus) #preview { max-height: 22dvh; } .fs-view { display: flex; height: auto; min-height: 0; flex-direction: column; overflow-x: hidden; padding: 4px 0 calc(72px + env(safe-area-inset-bottom, 0px)); } .fs-view.has-mobile-context { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } .fs-view .fs-header { flex: none; margin-bottom: 2px; } /* Visually hidden, not removed: display:none also strips the only heading from the accessibility tree, leaving this route with no outline. */ .fs-view .fs-header h1 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .fs-view .fs-title { flex: 1; min-width: 0; flex-direction: row; flex-wrap: nowrap; } .fs-view .fs-project-name { width: 100%; min-height: 36px; padding: 6px 10px; } /* Tools, add, undo, and export all live in the bottom bar / More sheet. */ .fs-view .fs-toolbar { display: none !important; } .fs-workspace { flex: 1 1 auto; display: flex; min-height: 0; } /* `.fs-view .fs-stage` on purpose: meme-school.css pins the mobile stage to `height: auto !important` at that specificity, and a single-class rule here loses to it however important it is. */ .fs-view .fs-stage { order: 1; flex: none; width: 100%; /* Taller than the space left under the header, so scrolling the header away hands the whole screen to the canvas. svh, not dvh: this is the rule that actually sizes the canvas on a phone, and dvh tracks the viewport as the browser's chrome moves. The page is deliberately scrollable here, so in an in-app browser (X, Instagram) scrolling moves that chrome, which changes dvh, which resizes the stage — every frame, for as long as the chrome is animating. Each resize wiped the canvas and re-centred the view under the finger. svh is the viewport with the chrome showing, so the stage keeps one height and the scroll stays a scroll. */ height: min(86svh, 820px) !important; min-height: 380px !important; max-height: none !important; } .fs-view .fs-side-left { display: none !important; } .fs-view .fs-side-action-bar { display: none !important; } .fs-view .fs-side-right { position: fixed; inset: auto 0 0; z-index: 29; width: 100%; max-height: min(72dvh, 640px); overflow: auto; padding: 10px 12px calc(86px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; /* rounded.sheet — see DESIGN.md */ background: var(--surface); box-shadow: 0 -10px 40px rgba(28, 27, 26, 0.22); transform: translateY(110%); visibility: hidden; pointer-events: none; } .fs-view .fs-side-right.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; } .fs-view .fs-side-right::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 8px; border-radius: 999px; background: var(--border); } .fs-view .fs-sheet-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .fs-sheet-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fs-sheet-kicker { margin: 0; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .fs-sheet-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; } .fs-sheet-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; min-width: 0; padding: 8px 4px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; } .fs-sheet-tool-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .fs-sheet-tool-icon svg { display: block; } .fs-sheet-tool-label { font-size: var(--t-micro); font-weight: 700; line-height: 1.15; white-space: nowrap; } .fs-sheet-tool.danger { color: #b91c1c; border-color: #fca5a5; } .fs-view .fs-sheet-head .fs-mb-btn { min-height: 42px; padding: 6px 12px; font-size: 13px; flex: none; } .fs-view .fs-sheet-head .fs-sheet-tool.is-active, .fs-view .fs-sheet-head .fs-sheet-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .fs-sheet-backdrop { position: fixed; inset: 0; z-index: 28; border: 0; background: rgba(20,18,16,0.35); } .fs-sheet-backdrop[hidden] { display: none !important; } .fs-mobilebar { display: flex; } .fs-mobile-context:not([hidden]) { display: block; } .fs-textdock { position: fixed; inset: auto 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } } /* =================================================================== Canvas left rail — spine of groups, one panel The four stacked drawers could not fit a laptop screen at once, so the library and saved files fell below the fold. The spine names every group; the panel shows one group in full. Layout only — the Hall skin lives in theme-hall.css. =================================================================== */ .fs-rail { align-self: stretch; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0; min-height: 0; overflow: clip; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .fs-spine { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; min-height: 0; background: #1d1a15; } /* Every spine item stays in the first screenful: a flexible filler would push Layers and Keys to the rail's foot, which falls below a 900px-tall window. A rule separates the group tabs from the two utilities instead. */ .fs-spine-fill { flex: 0 0 auto; height: 1px; margin: 8px 12px; background: rgba(236, 229, 214, 0.22); } .fs-spine-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; /* Real side padding: the label must not sit against the edge of the gold fill the selected group carries. */ padding: 8px 5px; min-height: 52px; border: 0; background: none; color: #cfc7b6; font: 700 9px/1.1 var(--font-body, Archivo, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .fs-spine-btn .ms-i { width: 20px; height: 20px; } .fs-spine-btn:hover:not([aria-selected="true"]) { color: #fff6df; background: rgba(236, 229, 214, 0.08); } /* The gold fill is the selection; a coloured edge on top of it said the same thing twice. */ .fs-spine-btn[aria-selected="true"] { color: #2b2008; background: linear-gradient(#e6cd8a, #e3c470); } .fs-spine-btn[aria-pressed="false"] { color: #9b9384; } .fs-spine-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .fs-rail-panels { min-width: 0; min-height: 0; display: flex; overflow: hidden; } .fs-rail-panel { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .fs-rail-panel[hidden] { display: none !important; } .fs-rail-title { margin: 0; font: 700 17px/1.2 var(--font-display, Georgia, serif); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* One group, one panel: the drawer inside is the content, so its own summary would repeat the spine's label. */ .fs-rail-panel > .fs-drawer { border: 0; border-radius: 0; padding: 0; background: none; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; } .fs-rail-panel > .fs-drawer > summary { margin: 0 0 2px; font: 700 17px/1.2 var(--font-display, Georgia, serif); list-style: none; cursor: default; pointer-events: none; } .fs-rail-panel > .fs-drawer > summary::-webkit-details-marker { display: none; } /* A group is fully visible; only a genuinely long list scrolls, inside its own area, with the search field and count staying put above it. */ .fs-rail-panel .fs-library, .fs-rail-panel #fs-projects, .fs-rail-panel .fs-quick-starters, .fs-rail-panel .fs-layouts:not(:empty) { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; } /* The AI tools that used to live only on /generator. */ .fs-ai-tools { display: flex; flex-direction: column; gap: 6px; } .fs-ai-tool { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; } .fs-ai-tool:disabled { opacity: 0.5; cursor: not-allowed; } .fs-ai-tool .ms-i { width: 18px; height: 18px; flex: 0 0 auto; } .fs-ai-tool-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fs-ai-tool-text strong { font: 700 13px/1.2 var(--font-body, Archivo, sans-serif); } .fs-ai-tool-text span { font: 600 11px/1.25 var(--font-body, Archivo, sans-serif); opacity: 0.8; } .fs-ai-cost { margin-left: auto; flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font: 700 10.5px var(--font-body, Archivo, sans-serif); letter-spacing: 0.05em; } .fs-ai-tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* The base .fs-dialog puts its padding on the form inside; this dialog holds a borrowed section instead, so it carries its own — without it the heading and the X mark sat flush against the dialog's edge. */ .fs-ai-tool-dialog { width: min(680px, 94vw); max-width: 94vw; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 20px; } .fs-ai-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -16px; z-index: 1; padding: 6px 0 10px; background: var(--surface); } .fs-ai-tool-head h2 { margin: 0; min-width: 0; } /* A Grok dialog's copy of the page's progress placard (AI tools, Grok Imagine edit) sits at the top of the screen while Grok works, and the dialog steps down below it so the bar never covers the heading or Close. */ .fs-ai-tool-dialog > .ai-generation-progress, #fs-ai-edit-dialog .ai-generation-progress { top: 12px; } .fs-ai-tool-dialog:has(> .ai-generation-progress:not([hidden])), #fs-ai-edit-dialog:has(.ai-generation-progress:not([hidden])) { margin-top: 76px; max-height: calc(100dvh - 92px); } /* The page's own bar would show dimmed through the backdrop as a second copy. */ body:has(#fs-ai-tool-dialog[open]) #ai-generation-progress, body:has(#fs-ai-edit-dialog[open]) #ai-generation-progress { visibility: hidden; } .fs-ai-tool-host { min-width: 0; } .fs-ai-tool-host .meme-create-panel, .fs-ai-tool-host .meme-news-details { min-width: 0; max-width: 100%; } @media (max-width: 760px) { /* Full width on a phone, like the editor's other dialogs. */ .fs-ai-tool-dialog { width: 100%; max-width: 100%; max-height: 90dvh; padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); } .fs-ai-tool-head { top: -14px; } } .fs-ai-tool-host .meme-create-panel { margin: 0; border: 0; box-shadow: none; padding: 0; background: none; } /* The dialog's own heading already carries the tool's name and cost, taken from this summary — showing both would say it three times. */ .fs-ai-tool-host .meme-news-details > summary.meme-news-summary, .fs-ai-tool-host .meme-create-panel h2 { display: none; } .fs-ai-tool-host > * + * { margin-top: 12px; } /* The spine's Layers button hands the canvas the right rail's width back — on desktop only: on a phone that panel is the properties sheet, and hiding it would take layers, properties and the folded sources with it. */ @media (min-width: 821px) { .fs-workspace.props-hidden { grid-template-columns: minmax(316px, 352px) minmax(0, 1fr); } .fs-workspace.props-hidden .fs-side-right { display: none; } } @media (max-width: 1200px) { .fs-rail { grid-template-columns: 64px minmax(0, 1fr); } .fs-spine-btn { min-height: 48px; padding: 7px 2px; } } /* On a phone the spine lies down: one scrolling row of chips between the project title and the canvas, with the chosen group's panel under it. The groups used to be folded into the properties sheet, two taps away behind "More", with the canvas hidden while you browsed. */ @media (max-width: 760px) { .fs-view .fs-workspace { flex-direction: column; } .fs-view .fs-side-left.fs-rail { display: flex !important; flex-direction: column; order: 0; flex: 0 0 auto; width: 100%; height: auto; min-height: 0; position: static; align-self: auto; margin: 0 0 8px; border: 0; border-radius: 0; background: none; overflow: visible; } .fs-spine { flex-direction: row; align-items: center; gap: 6px; padding: 7px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* The chips are the row; scrolling them must not drag the page. */ overscroll-behavior-x: contain; scroll-padding-inline: 10px; } .fs-spine::-webkit-scrollbar { display: none; } .fs-spine-btn { flex: 0 0 auto; flex-direction: row; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid rgba(236, 229, 214, 0.24); border-radius: 999px; font-size: 11px; scroll-margin-inline: 10px; } .fs-spine-btn[aria-selected="true"] { border-color: #8a6a1f; } /* A divider makes no sense lying down; the two utility chips read as chips. */ .fs-spine-fill { display: none; } .fs-rail-panels { display: block; overflow: visible; } .fs-rail-panel { padding: 11px 12px; /* Enough to browse in, never so much that the canvas leaves the screen. */ max-height: min(46dvh, 420px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .fs-rail-panel .fs-library { max-height: none; } /* The stage keeps its own height; it follows the rail down the page. */ .fs-view .fs-stage { order: 1; } }