style(runner): optimize CodeMirror editor height auto-scaling and scrolling limit

This commit is contained in:
xfy 2026-07-08 14:32:04 +08:00
parent f60bc4beaa
commit 3bb67f6673
2 changed files with 15 additions and 4 deletions

View File

@ -852,3 +852,18 @@
/* ========== Blur-up 渐进图片加载(已移入 @layer components ========== */
@source "./src/**/*.{rs,html}";
/* ========== CodeMirror 代码运行器高度自适应优化 ========== */
.code-runner-editor {
min-height: 120px;
max-height: 400px;
display: flex;
flex-direction: column;
}
.code-runner-editor .cm-editor {
flex: 1 1 auto !important;
}
.code-runner-editor .cm-scroller {
overflow: auto;
}

View File

@ -259,13 +259,9 @@ pub fn CodeRunner(
}
}
}
// CodeMirror 容器:组件自身在 WASM 端按此 id 挂载编辑器。
// 服务端渲染时仅展示空容器,避免在 SSR 阶段拉起 JS 编辑器。
// relative 定位,使骨架屏覆盖层(未就绪时)能贴合容器尺寸。
div {
id: "{container_id}",
class: "code-runner-editor font-mono text-sm relative",
style: "min-height: 160px; display: flex; flex-direction: column",
// 骨架屏CodeMirror 尚未挂载就绪时SSR + hydration 完成前)显示。
// editor_ready 由挂载 effect 置 true 后,此处 if 分支消失,骨架屏从 DOM 移除。