fix(sql): scroll long scripts inside the SQL editor (#1480)#1481
fix(sql): scroll long scripts inside the SQL editor (#1480)#1481shaishab316 wants to merge 3 commits into
Conversation
Constrain the SQL panel with flex + overflow so CodeMirror scrolls internally instead of growing the view. Fixes prisma#1480.
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR fixes the SQL Console layout issue where very long queries caused the CodeMirror editor to expand vertically, pushing the header (including Run SQL) out of easy reach.
Changes:
- Constrained the SQL view layout using flex +
min-h-0/flex-1/overflow-hiddenso the editor pane height is bounded. - Configured CodeMirror to fill available height (
height="100%") so long content scrolls inside the editor. - Adjusted result grid container flex behavior so the empty result area doesn’t consume space when there’s no result.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| ui/studio/views/sql/SqlView.tsx | Introduces bounded flex layout and makes CodeMirror scroll internally; adjusts result container flexing based on presence of results. |
| ui/studio/views/sql/SqlView.test.tsx | Adds a regression test asserting the presence of the new bounded/overflow-hidden editor container. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
sorenbs
left a comment
sorenbs
left a comment
There was a problem hiding this comment.
Hi @shaishab316, thanks a lot for taking this on — the before/after screenshots and the clear breakdown in the description made this easy to review, and the fix direction (bounding the pane and letting CodeMirror scroll internally) is exactly right.
A few things before we can merge:
-
Layout proportions when results are shown. With this change the editor pane and the result grid are both
flex-1, so they always split the view 50/50. Today the editor auto-sizes to its content, so for a short query the result grid gets most of the screen — after this PR it would only get half, with a mostly empty editor above it. Could we keep the auto-sizing and instead cap the editor, e.g. via CodeMirror'smaxHeightprop (or amax-h-*on the container), so it grows with content up to a limit and then scrolls? That fixes #1480 without changing the layout for the common case. Keeping yourflex-1behavior for the no-result state (editor fills the pane) is a nice touch and worth preserving. -
Changeset. Per our release process, bugfix PRs need a changeset — could you run
pnpm changesetand add a patch entry for this fix? -
Formatting. The JSX siblings inside the new wrapper didn't get re-indented, and the new
cnimport is slightly out of sort order — a quick lint/format pass should clean both up.
Small note for next time: opening the PR from a feature branch (rather than your fork's main) makes it easier for us to push tweaks and keeps the PR stable if you keep working on your fork. No need to change it for this one.
Thanks again — happy to re-review quickly once the height cap question is settled!
Address review feedback: instead of evenly splitting the SQL panel between editor and result grid, keep the editor auto-sized to content (capped at 40vh) so short queries don't leave a mostly empty editor pane above the results.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
Summary by CodeRabbit
WalkthroughThe SQL view now keeps the editor content-sized until results appear, then applies a 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.5.3)ui/studio/views/sql/SqlView.tsxFile contains syntax errors that prevent linting: Line 1205: expected 🔧 ESLint
ui/studio/views/sql/SqlView.tsxParsing error: ')' expected. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Warning
CodeRabbit couldn't request changes on this pull request because it doesn't have sufficient GitHub permissions.
Please grant CodeRabbit Pull requests: Read and write permission and re-run the review.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/studio/views/sql/SqlView.tsx`:
- Around line 931-935: Run the project formatter on all affected sites: in
ui/studio/views/sql/SqlView.tsx:931-935, add the Prettier-required spacing
between the closing strong element and aiGenerationErrorMessage; in
ui/studio/views/sql/SqlView.test.tsx:1299-1301 and 1327-1329, reformat the
sql-editor-scroll-container querySelector calls; and in
ui/studio/views/sql/SqlView.test.tsx:1332-1334, reformat the
sql-result-grid-container querySelector call. Use Prettier or eslint --fix
without changing behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5fa7561f-fdc8-44ee-9974-308a8c4ed301
📒 Files selected for processing (5)
.changeset/bright-bears-run.mdArchitecture/sql-view.mdFEATURES.mdui/studio/views/sql/SqlView.test.tsxui/studio/views/sql/SqlView.tsx
|
@coderabbitai resolve merge conflict |
|
CodeRabbit chat interactions are restricted to organization members for this repository. Ask an organization member to interact with CodeRabbit, or set |
shaishab316
left a comment
shaishab316
left a comment
There was a problem hiding this comment.
Done — all three addressed:
- Layout — swapped flex-1 for auto-sizing + a maxHeight cap on the CodeMirror editor, so short queries still leave most of the space to the result grid, with internal scroll once it hits the cap. Kept flex-1 for the no-result state.
- Changeset — added via pnpm changeset.
- Formatting — re-indented JSX, fixed cn import order.
Summary
Fixes prisma/studio#1480: the SQL console editor could grow with very long queries, stretching the layout so Run SQL (and the rest of the header) was hard to reach without zooming or resizing.
What changed
min-h-0/flex-1) so the editor panel has a bounded height.height="100%") so content scrolls inside the editor instead of expanding the whole view.flex-none), so the editor can use the full pane.How to test
pnpm test -- ui/studio/views/sql/SqlView.test.tsxpnpm demo:ppg), open SQL Console, paste a large script, and confirm the editor scrolls internally while Run SQL stays visible in the header.Before
After