From 223a09c636a07c31c6dcbe803a7327f7bc3c63ca Mon Sep 17 00:00:00 2001 From: Aleksey Shakhmatov Date: Wed, 6 May 2026 23:20:00 +0300 Subject: [PATCH] fix: make SQL editor scrollable when query overflows the panel @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. --- src/components/editor/SqlEditor.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/editor/SqlEditor.tsx b/src/components/editor/SqlEditor.tsx index a7893c0..9cc61f6 100644 --- a/src/components/editor/SqlEditor.tsx +++ b/src/components/editor/SqlEditor.tsx @@ -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,