b915f2e766
The previous flicker fix hid the textarea via CSS but display: none removes it from layout entirely — so the page rendered with zero height where the editor would go, then cm6 mounted and pushed the surrounding form down by its full height (CLS). Wrap each editor textarea in <div class="editor-mount" style="min-height: …rem"> so the slot is reserved before cm6 mounts. The wrapper is a flex column with cm6 as flex: 1 so cm6 fills the reserved space rather than collapsing to content-height with a gap below (the seeded blueprint has 2 chars of content; without flex the editor would shrink to one line). Min-heights calibrated to rows × ~1.25rem + ~1.5rem chrome: - config (rows=8) → 12rem - files (rows=14) → 19rem - script (rows=20) → 27rem .cm-editor's own min-height: 8em rule removed — the wrapper is the floor now, and the inner cm6 stretches to fill via flex. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
36 lines
1.2 KiB
CSS
36 lines
1.2 KiB
CSS
/* Editor (CodeMirror 6) shell styling. Token / gutter / selection colors
|
|
* are set inside cm6 themes (themes.js) bound to the --cm-* variables
|
|
* in tokens.css; this file scopes the editor container's chrome to
|
|
* match the rest of the app. */
|
|
|
|
/* Pre-hide opt-in textareas to avoid the textarea-visible-then-hidden
|
|
* flicker on page load. editor.js un-hides them again if the bundle
|
|
* fails to load or a per-textarea mount throws. The <noscript> rule
|
|
* in _editor_assets.html un-hides for JS-disabled users. */
|
|
textarea[data-editor-language] { display: none; }
|
|
|
|
/* Wrapper that reserves layout space before cm6 mounts, sized by the
|
|
* inline `min-height` style each call site sets to match the original
|
|
* textarea's `rows`. cm6 is a flex child that fills the reserved space
|
|
* (otherwise short content would render cm6 small with a gap below). */
|
|
.editor-mount {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.editor-mount > .cm-editor {
|
|
flex: 1;
|
|
}
|
|
|
|
.cm-editor {
|
|
border: var(--line);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.cm-editor.cm-focused {
|
|
outline: 2px solid var(--color-focus);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
textarea[data-editor-language] + .cm-editor {
|
|
width: 100%;
|
|
}
|