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}
|
||||
extensions={extensions}
|
||||
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={{
|
||||
lineNumbers: true,
|
||||
foldGutter: true,
|
||||
|
||||
Reference in New Issue
Block a user