fix: make SQL editor scrollable when query overflows the panel
Some checks failed
CI / lint-and-build (push) Failing after 3m14s

@uiw/react-codemirror's outer wrapper inherited h-full but the inner
.cm-editor / .cm-scroller had no height constraint, so long queries
spilled outside the visible area with no way to scroll. Pass
`height="100%"` to the CodeMirror component and pin .cm-editor to the
wrapper height via a Tailwind arbitrary selector so the scroller
renders correctly inside the resizable panel.
This commit is contained in:
2026-05-06 23:20:00 +03:00
parent 9a424dcd34
commit 223a09c636

View File

@@ -81,7 +81,11 @@ export function SqlEditor({ value, onChange, onExecute, onFormat, schema }: Prop
onChange={handleChange} onChange={handleChange}
extensions={extensions} extensions={extensions}
theme="dark" theme="dark"
className="h-full text-sm" // height="100%" propagates down to .cm-editor so the inner .cm-scroller
// can render a vertical scrollbar; without it, long queries overflow the
// flex container and the editor cannot be scrolled.
height="100%"
className="h-full text-sm [&_.cm-editor]:h-full"
basicSetup={{ basicSetup={{
lineNumbers: true, lineNumbers: true,
foldGutter: true, foldGutter: true,