fix: make SQL editor scrollable when query overflows the panel
Some checks failed
CI / lint-and-build (push) Failing after 3m14s
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:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user