Lay the job editor in the center column so it tracks the sidebar grid.

The overlay used a measured left offset that sampled width in steps during
the frame's grid-template-columns transition, which stuttered and flashed
the chat behind it.
This commit is contained in:
Whale-Zhang 2026-08-24 17:13:59 +08:00
parent f9b28f896f
commit 41a382c592
2 changed files with 29 additions and 3 deletions

View file

@ -255,9 +255,11 @@ window.__ModuleLoader__.load({
.dsh-ct-runsInner{overflow:hidden;min-height:0}
.dsh-ct-runsInner>*+*{margin-top:2px}
.dsh-ct-chevronHit{appearance:none;border:none;background:transparent;padding:0;margin:0;color:inherit;cursor:pointer;display:inline-flex}
.dsh-ct-main{position:fixed;top:0;right:0;bottom:0;left:var(--dsh-ct-sidebar,260px);z-index:30;background:var(--dsw-alias-bg-layer-1);overflow:auto;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s var(--ds-ease-in-out,ease),transform .2s var(--ds-ease-in-out,ease)}
.dsh-ct-main[data-open=true]{opacity:1;pointer-events:auto;transform:none}
[data-dsh-ct-host]{position:relative}
.dsh-ct-main{position:absolute;inset:0;z-index:8;background:var(--dsw-alias-bg-layer-1);overflow:auto;pointer-events:none;visibility:hidden}
.dsh-ct-main[data-open=true]{pointer-events:auto;visibility:visible}
.dsh-ct-main[data-open=true] .dsh-ct-editor{animation:dsh-ct-pane-in .2s var(--ds-ease-in-out,ease)}
body>.dsh-ct-main{position:fixed;top:0;right:0;bottom:0;left:var(--dsh-ct-sidebar,260px)}
@media (prefers-reduced-motion:reduce){
.dsh-ct-region,.dsh-ct-main,.dsh-ct-runs,.dsh-ct-arrow,[data-dsh-ct-mode=on] .dsh-ct-region{animation:none;transition:none}
}
@ -876,8 +878,28 @@ window.__ModuleLoader__.load({
const [cronMode, setCronMode] = useState(false)
const [workspaces, setWorkspaces] = useState([])
const [catalog, setCatalog] = useState({ groups: [], current: null })
const [paneHost, setPaneHost] = useState(() => (typeof document === 'undefined' ? null : document.body))
const skipAutoSelect = useRef(false)
useEffect(() => {
const bind = () => {
const col = document.querySelector('[class*="centerCol"]')
if (!col) {
setPaneHost(document.body)
return
}
if (col.getAttribute('data-dsh-ct-host') !== '1') col.setAttribute('data-dsh-ct-host', '1')
setPaneHost((prev) => (prev === col ? prev : col))
}
bind()
const obs = new MutationObserver(bind)
if (document.body) obs.observe(document.body, { childList: true, subtree: true })
return () => {
obs.disconnect()
document.querySelectorAll('[data-dsh-ct-host="1"]').forEach((el) => el.removeAttribute('data-dsh-ct-host'))
}
}, [])
const load = useCallback(async () => {
try {
const [jobBody, histBody, wsBody, modelBody] = await Promise.all([
@ -1065,7 +1087,7 @@ window.__ModuleLoader__.load({
onRemove: (id) => api(`/jobs/${id}`, { method: 'DELETE' }).then(() => { selectNew(); return load() }).catch((err) => setError(err.message)),
onToggleGroup: (id) => setExpanded((prev) => ({ ...prev, [id]: prev[id] !== true })),
}),
ReactDOM.createPortal(editor, document.body),
paneHost ? ReactDOM.createPortal(editor, paneHost) : null,
)
}