diff --git a/ui/studio/views/sql/SqlView.test.tsx b/ui/studio/views/sql/SqlView.test.tsx index c18a3884..827945a8 100644 --- a/ui/studio/views/sql/SqlView.test.tsx +++ b/ui/studio/views/sql/SqlView.test.tsx @@ -1259,6 +1259,23 @@ describe("SqlView", () => { harness.cleanup(); }); + it("keeps the SQL editor in a bounded scroll region for long scripts", () => { + const { adapter } = createAdapterMock(); + const studio = createStudioMock(adapter); + useStudioMock.mockReturnValue(studio); + + const harness = renderSqlView(); + + const scrollRegion = harness.container.querySelector( + '[data-testid="sql-editor-scroll-container"]', + ); + expect(scrollRegion).toBeTruthy(); + expect(scrollRegion?.className).toContain("min-h-0"); + expect(scrollRegion?.className).toContain("overflow-hidden"); + + harness.cleanup(); + }); + it("supports cancelling a running query", async () => { const raw: Adapter["raw"] = async (_details, options) => { return await new Promise((resolve) => { diff --git a/ui/studio/views/sql/SqlView.tsx b/ui/studio/views/sql/SqlView.tsx index 904ec5ac..9c2cd640 100644 --- a/ui/studio/views/sql/SqlView.tsx +++ b/ui/studio/views/sql/SqlView.tsx @@ -24,6 +24,7 @@ import { createSqlEditorSchemaFromIntrospection } from "../../../../data/sql-edi import { getTopLevelSqlStatementAtCursor } from "../../../../data/sql-statements"; import { Button } from "../../../components/ui/button"; import { Input } from "../../../components/ui/input"; +import { cn } from "../../../lib/utils"; import { TableHead, TableRow } from "../../../components/ui/table"; import { useColumnPinning } from "../../../hooks/use-column-pinning"; import { useIntrospection } from "../../../hooks/use-introspection"; @@ -875,41 +876,47 @@ export function SqlView(_props: ViewProps) { ) : null} -
-
- { - editorViewRef.current = view; - const cursorIndex = view.state.doc.length; - view.dispatch({ - selection: { - anchor: cursorIndex, - head: cursorIndex, - }, - }); - view.focus(); - }} - onChange={(value) => { - hasUserEditedEditorValueRef.current = true; - latestEditorValueRef.current = value; - setEditorValue(value); - }} - placeholder="Write SQL..." - theme={isDarkMode ? "dark" : "light"} - value={editorValue} - /> -
+
+
+
+ { + editorViewRef.current = view; + const cursorIndex = view.state.doc.length; + view.dispatch({ + selection: { + anchor: cursorIndex, + head: cursorIndex, + }, + }); + view.focus(); + }} + onChange={(value) => { + hasUserEditedEditorValueRef.current = true; + latestEditorValueRef.current = value; + setEditorValue(value); + }} + placeholder="Write SQL..." + theme={isDarkMode ? "dark" : "light"} + value={editorValue} + /> +
{aiGenerationErrorMessage ? (
AI SQL generation error: {aiGenerationErrorMessage} @@ -969,25 +976,29 @@ export function SqlView(_props: ViewProps) { ) : null}
) : null} -
+
-
- {result == null ? null : ( - - )} +
+ {result == null ? null : ( + + )} +
);